我目前在手机上使用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; } }