我的模态视图的内容长于其边界,因此我设置了overflow-y: scroll
。然而问题是模态视图位于身体的顶部并且还启用了滚动,因此当我尝试聚焦于模态视图并滚动时,它有时会抓住身体并滚动而不是模态。它似乎忽略了z-index值。
我是否可以使用任何jQuery来关注模态视图,并完全忽略它下面的任何内容?
这是html&模态div的css:
<div class="modal-window">
<div class="modal-content">
<div class="modal-image"></div>
<ul class="modal-details">
<li>Placeholder text</li>
<li>Placeholder text</li>
<li>Placeholder text</li>
<li>Placeholder text</li>
<li>Placeholder text</li>
</ul>
</div>
</div>
.modal-window {
position: fixed;
z-index: 4;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 100px;
width: 476px;
height: 618px;
border: 1px solid white;
}
.modal-content {
position: relative;
z-index: 4;
height: inherit;
width: inherit;
overflow-y: scroll;
}
以下是展示此问题的视频:
https://s3.amazonaws.com/whatever12345/hggg.mov
你可以看到而不是只关注模态,它抓住下面的身体并滚动它,有些点甚至无视模态和与身体相互作用,我如何只关注模态当它的存在和完全无视下面的任何元素?
答案 0 :(得分:0)
基本上,您一次只需要一个滚动条。
有几种方法可以做到。