关于移动滚动问题的 twitter bootstrap 3 模态 [英] twitter bootstrap 3 modal on mobile scroll issues
问题描述
我目前在移动设备上使用 twitter bootstrap 3 模式.它在桌面上工作得很好，但是在移动设备上，每当我滚动它时，它也会滚动模态后面的窗口.我如何防止这种情况发生?
FOR BOOTSTRAP 3
我找到了一个解决此问题的方法，它似乎对我的网站来说已经足够了.
CSS:
body.modal-open >.裹 {溢出:隐藏；高度:100%；}.modal-内容，.modal 对话框，.modal-body {高度:继承；最小高度:100%；}.modal {最小高度:100%；}HTML:
<div class="wrap">所有非模态内容</div><div class="modal"></div>所以在一个模态打开的情况下，所有非模态内容都被限制在视口的高度范围内，并且溢出被隐藏，这样可以防止主站点滚动，而模态仍然可以滚动.<小时>
编辑:此修复在 Firefox 中存在一些问题.
对我的网站的修复是(仅限 FF 媒体查询):
@-moz-document url-prefix() {.modal-body { 高度:自动；最小高度:100%；}.modal { 高度:自动；最小高度:100%；}.modal-dialog {宽度:100%；高度:100%；最小高度:100%；填充:0；边距:0；顶部:0；左:0；}.modal-content {高度:自动；最小高度:100%；边界半径:0；边框:0px 实心 #000；边距:0；填充:0；顶部:0；左:0；}}I am currently using twitter bootstrap 3 modal on mobile. It works perfectly fine on desktop, however on mobile whenever I scroll it also scrolls the window behind the modal. How do I prevent this from happening?
FOR BOOTSTRAP 3
I found a fix for this issue that seems to be good enough for my site.
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>
So in the case that a modal is open, all non-modal content is limited to the height of the viewport and overflow is hidden, which prevents the main site from being scrolled, while the modal can still be scrolled.
EDIT: This fix has some issues in Firefox.
Fix for my site was (FF only media query):
@-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;
}
}
这篇关于关于移动滚动问题的 twitter bootstrap 3 模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
