Twitter BootStrap 模态窗口后备链接

2022-01-17 00:00:00 modal-dialog jquery css twitter-bootstrap

我正在使用 Twitter Bootstrap 模式窗口.以防模式窗口由于 js 错误而无法工作 - 有一个后备页面.如果模态窗口未加载，我如何确保页面已加载?

I am using Twitter Bootstrap modal windows. Just incase the modal windows dont work because of the js error - have a fall back pages. How can i make sure the page is loaded if the modal window doesnt load ?

打开模态窗口的链接

<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 时，如下所示

When i try to Add the link to the href as follows

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

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

the Linked Page Loads in the Modal Window!!

推荐答案

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

Looking at line 223 in bootstrap-modal.js revealed what's happening:

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

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

When using the data api the modal checks if the href attribute is not an id and sets that as the value for the remote option. This causes the page to load the data-target content initially and then load in the href content after as remote content.

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

So to avoid the href content getting loaded into the modal you need to specify data-remote="false" on your link:

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

相关文章