[英]Prevent background from scrolling when a modal is opened, but modal content is scrollable
I have a modal box code that, when executed, doesn't fill up the whole height of the webpage, ie, the main content can still be scrollable.我有一个模态框代码,执行时不会填满网页的整个高度,即主要内容仍然可以滚动。 What I want is:我想要的是:
My body (background) stops scrolling when the modal is opened, and打开模式时,我的身体(背景)停止滚动,并且
When the modal is opened, the modal content is scrollable.当模态打开时,模态内容是可滚动的。
Also, I want to use the modal box several times.另外,我想多次使用模态框。 That is I don't want to consider a single code to open several modal boxes.那就是我不想考虑一个代码来打开几个模态框。
Here is the HTML code:这是HTML代码:
<!--the same lines to make page long-->
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<!--modal html-->
<div id="modal">
<div class="modal-content">
<div class="header">
<h2>Modal Header</h2>
</div>
<div class="copy">
<p>Modal Body</p>
<a href="#">Close Link</a> </div>
</div>
<!--<div class="overlay"></div>-->
</div>
<a class="button" href="#modal">
Launch A Modal
</a>
Here is the CSS code:这是CSS代码:
<style>
body,
html{
margin: 0;
}
.button {
color: rgba(0, 0, 0, .8);
text-decoration: none;
font-size: 1.2em;
padding: 5px 10px;
border: 1px solid rgba(0, 0, 0, .8);
margin: 40px 0 0 40px;
display: inline-block;
-webkit-transition: all .1s ease-in-out;
}
.button:hover {
background-color: rgba(0, 0, 0, .8);
color: whitesmoke;
}
#modal {
margin: 0;
opacity: 0;
position: absolute;
left: -50%;
visibility: hidden;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
background: #1D1F20;
}
#modal:target {
opacity: 1;
left: 0;
top: 0;
bottom: 0;
width: 100%;
visibility: visible
}
#modal .header,
#modal .footer {
border-bottom: 1px solid #1ABC9C;
border-radius: 0;
}
#modal .footer {
border: none;
}
#modal h2 {
margin: 0;
color: whitesmoke;
}
#modal .btn {
float: right
}
#modal .copy,
#modal .header,
#modal .footer {
padding: 10px;
color: whitesmoke;
}
.modal-content {
position: relative;
z-index: 20;
color: #fff;
width: 50%;
margin: 0 auto;
}
#modal .copy {
background: #1D1F20;
}
#modal .overlay {
background-color: #000;
background: rgba(0, 0, 0, .8);
top: 0;
left: 0;
position: fixed;
height: 100%;
width: 100%;
z-index: 10
}
.copy a {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 5px 10px;
border: 1px solid white;
background-color: none;
-webkit-transition: all .2s ease-in-out;
}
.copy a:hover {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 5px 10px;
border: 1px solid white;
background-color: rgba(255, 255, 255, .1);
}
</style>
// Get the button that opens the modal
var btn = document.querySelectorAll("button.modal-button");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function(e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
}
}
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
you can you use this你能用这个吗
function disable(){
document.body.style.overflow = 'hidden';}
function enable(){
document.body.style.overflow = 'scroll';}
function disableScrolling() {
disable();}
function enableScrolling() {
enable();}
and in the anchor tag for opening the model use this onclick='return disableScrolling()并在打开模型的锚标记中使用这个 onclick='return disableScrolling()
example例子
<a class="button" href="#modal" onclick='return disableScrolling()'>Launch A Modal</a>
and for closing the model use this并关闭模型使用这个
<a href="#" onclick='return enableScrolling()'>Close Link</a>
and in the model content div use this并在模型内容 div 中使用它
style="overflow-y: scroll; height:400px;"
for the third question you can use this for example对于第三个问题,您可以使用这个例如
<div id="modal2" class="model">
you will add class= "model" then change the id with model1 or model2 or model3 ..etc then open the CSS file using vscode and search for #model then replace all with ".model"您将添加 class="model" 然后使用 model1 或 model2 或 model3 ..etc 更改 id 然后使用 vscode 打开 CSS 文件并搜索 #model 然后将所有替换为 ".model"
and use this as example并以此为例
<a class="stopb" href="#modal2" onclick='return disableScrolling()'>
Launch A Modal2
</a>
you have to change the href to the id of the model您必须将 href 更改为模型的 id
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.