我目前在手机上使用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; } }
原文地址:https://www.jb51.cc/bootstrap/234091.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。