Twitter的引导模式窗口撤退链路(Twitter BootStrap Modal Window

我使用Twitter的引导模式窗口。 只是柜面的模态窗口不因为JS错误的工作 - 有一个回落的页面。 我如何才能确保，如果模态窗口犯规负荷加载页面？

链接打开模态窗口

<a href="#login-modal" data-toggle="modal" data-target="#login-modal">Login</a>

模态窗口

<!-- Login Modal -->
        <div id="login-modal" class="modal hide fade landing-modal" tabindex="-2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h3>Login</h3>
            </div>
            <div class="modal-body">
                <form>
                    <div class="control-group">
                        <label for="email">Email Address</label>
                        <div class="controls">
                            <input class="input-medium" name="email" type="text"  />
                        </div>
                    </div>
                    <div class="control-group">
                        <label for="password">Password</label>
                        <div class="controls">
                            <input class="input-medium" name="password" type="password" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="checkbox">
                            <input type="checkbox" value="">
                            Remember me</label>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <button type="submit" class="button">
                                Login
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

当我试图将链接添加到HREF如下

 <a href="login.html" data-toggle="modal" data-target="#login-modal">Login</a>

链接的页面加载模态窗口！

Answer 1:

综观自举modal.js线223揭示了发生的事情：

, option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())

当使用数据API的模态检查是否href属性不是ID，并设置作为所述值remote选项。 这会导致页加载data-target最初的内容，然后在加载href内容如后remote内容。

因此，为了避免在href内容越来越加载到你需要指定的模态data-remote="false"你的链接：

<a href="/some-login-page.html" data-toggle="modal" data-target="#login-modal" data-remote="false">Login</a>

Answer 2:

模态插件会优先于data-target的属性。 然后，您可以使用href指向你想要的撤退链路。 由于模态调用插件preventDefault上选择匹配点击事件[data-toggle="modal"]该链接将仅在JavaScript被禁用，随后（或没有加载模态插件）。

有一点要记住，但是，是模态插件不使用href属性加载远程内容。 要绕过该特征被激活，仅仅包括在所述的端部的“＃” href值。

<a href="/some-login-page.html#" data-toggle="modal" data-target="#login-modal">Login</a>

文章来源: Twitter BootStrap Modal Window fallback link