[英]stop scrolling on body when modal is open and allow scroll on modal divs
When I open a modal I can scroll down to the body of the page but I can't scroll down the modal to see all the data (only the background site is scrolling), any idea how to stop scrolling on the background body but allow scrolling on the modal itself? 当我打开模态时,我可以向下滚动到页面主体,但不能向下滚动模态以查看所有数据(仅后台站点正在滚动),任何想法如何停止在后台主体上滚动但允许在模态本身上滚动?
this is my css: 这是我的CSS:
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 10000px;
background-color: /* rgba(0, 0, 0, .5); */rgba(43, 46, 56, 0.9);
transition: opacity .3s ease;
}
.modal-container {
box-sizing: border-box;
width: 75%;
z-index: 10000;
/* max-height: 650px; */
overflow: auto;
margin: 0px auto 0;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
-webkit-overflow-scrolling: touch;
}
modal html: 模态html:
<div class="modal-mask" @click="$emit('close')" v-show="show" transition="modal">
<div @click.stop class="modal-container">
<button @click="$emit('close')"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
<div class="modal-header">
<h2>Title</h2>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer text-right">
<!-- <button class="modal-default-button">
Close
</button> -->
</div>
</div>
</div>
I tried adding overflow:hidden to the body when the modal is opened and it does cancel the scrolling on the body but still doesn't give me scrolling on the modal 我尝试在模态打开时向主体添加overflow:hidden,但它确实取消了主体上的滚动,但仍然无法让我在模态上滚动
You can set the body's style to overflow: hidden
this makes the scroll go away, then all you need is to make your modal inside of a div
that its overflow
is scroll
or auto
and basically make the model scrollable. 您可以将主体的样式设置为
overflow: hidden
会使滚动消失,然后您所要做的就是将div
模式设为div
,使其overflow
为scroll
或auto
并基本使模型可滚动。 Remember the modal parent should be position: fixed
and its width
and height
should be 100%
. 请记住,模态父对象应处于
position: fixed
,其width
和height
应为100%
。
Using jQuery/JS to modify the body
's overflow
when the modal is opened, you can make it so the page will stop scrolling, and the modal will still be scrollable. 当打开模态时,使用jQuery / JS修改
body
的overflow
,可以使它停止页面,并且模态仍然可以滚动。
The key aspects of this solution are: 该解决方案的关键方面是:
overflow: scroll;
overflow: scroll;
set. overflow: hidden;
overflow: hidden;
when the modal is opened. I mocked up a very simple example, see below: 我模拟了一个非常简单的示例,如下所示:
$('.click').click(function(){ $('.modal').show(); $('body').css("overflow", "hidden"); });
.content { height: 700px; width: 100%; background: grey; } .click { background: blue; cursor: pointer; } .modal { position: absolute; width: 100px; height: 100px; background: red; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; overflow: scroll; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="content"> This is the main content that scrolls until the modal is opened. <div class="click">Click me to open modal</div> <div class="modal">This is a modal that requires me to scroll down on hence there is a lot of placeholder text in here that I am having to type man I should've used Lipsum.</div> </div>
Let me know if you need any other help. 让我知道您是否需要其他帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.