Twitter BootStrap模式窗口后备链接 [英] Twitter BootStrap Modal Window fallback link
问题描述
我使用Twitter Bootstrap模式窗口。只是incase模态窗口不工作,因为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
内容,然后加载 href
内容为 remote
内容。
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内容加载到模态中,需要指定 -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>
这篇关于Twitter BootStrap模式窗口后备链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!