我目前在手机上使用twitter bootstrap 3模态.它在桌面上工作得很好,但是在移动时,只要滚动它也会滚动窗口后面的模态.如何防止这种情况发生？
解决方法
FOR BOOTSTRAP 3
我发现这个问题的修复似乎对我的网站来说足够好.
CSS：
body.modal-open > .wrap {
overflow: hidden;
height: 100%;
}
.modal-content,.modal-dialog,.modal-body {
height: inherit;
min-height: 100%;
}
.modal {
min-height: 100%;
}
HTML：
<body> <div class="wrap">All non-modal content</div> <div class="modal"></div> </body>
所以在模态是打开的情况下,所有的非模态内容都限制在视口的高度,而且溢出被隐藏,这样就阻止了主站点被滚动,同时模态仍然可以被滚动.
编辑：这个修复在Firefox中有一些问题.
修复我的网站是(FF只媒体查询)：
@-moz-document url-prefix() {
.modal-body { height: auto; min-height: 100%; }
.modal { height: auto; min-height: 100%; }
.modal-dialog {
width: 100%;
height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
top: 0;
left: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
border: 0px solid #000;
margin: 0;
padding: 0;
top: 0;
left: 0;
}
}