Twitter BootStrap 模态窗口后备链接答案

【问题标题】：Twitter BootStrap Modal Window fallback linkTwitter BootStrap 模态窗口后备链接
【发布时间】：2012-12-05 07:57:15
【问题描述】：

我正在使用 Twitter Bootstrap 模式窗口。以防模式窗口由于 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>

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

【问题讨论】：

标签： jquery css twitter-bootstrap modal-dialog

【解决方案1】：

查看 bootstrap-modal.js 中的第 223 行会发现发生了什么：

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

使用数据 api 时，模式会检查 href 属性是否不是 id 并将其设置为 remote 选项的值。这会导致页面最初加载data-target 内容，然后在remote 内容之后加载href 内容。

因此，为避免 href 内容加载到模式中，您需要在链接上指定 data-remote="false"：

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

【讨论】：

非常感谢乔希。非常感谢，我不必手动编写 return false ：P

【解决方案2】：

Modal 插件优先于data-target 属性。然后，您可以使用 href 指向所需的后备链接。由于 Modal 插件在与选择器 [data-toggle="modal"] 匹配的 click 事件上调用 preventDefault，因此只有在禁用 JavaScript（或 Modal 插件未加载）时才会跟踪该链接。

但是要记住的一点是，Modal 插件确实使用href 属性来加载远程内容。要绕过激活该功能，只需在 href 值的末尾添加一个“#”即可。

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

【讨论】：

我遇到了同样的问题。这似乎没有按预期工作。
@JoshFarneman @Harsha 哎呀……对不起！忘记了远程加载会随之而来。我更新了我的答案。只需在href 中添加一个“#”即可。
请参阅下面的我的答案，了解使用data-remote="false" 而不是额外的# 的替代方法。