Twitter BootStrap 模态窗口备用链接

Question

我正在使用 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>

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

- Harsha M V

Answer 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内容，然后将href内容作为remote内容加载。

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

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

- Josh Farneman

---

非常感谢你，Josh。幸运的是我不必手动编写“返回false”：P - Harsha M V

Answer 2

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

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

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

- merv

---

我遇到了同样的问题。这似乎并没有按照预期工作。 - Josh Farneman

@JoshFarneman @Harsha 不好意思！我忘记了远程加载会触发这个。我更新了我的答案。只需在 href 前面添加一个 '#' 即可。 - merv

请看我的答案，使用 data-remote="false" 代替额外的 #。 - Josh Farneman