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>

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

enter image description here

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>

Answer 2

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

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

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

Twitter BootStrap模态窗口后备链接

2 个答案: