Question

我有jQuery代码，可在弹出模式打开时删除滚动条。因此，当我需要关闭弹出窗口时，滚动条需要再次出现，并且该功能可以按预期工作，除了一件事：如果用户单击弹出窗口之外的其他位置，它将关闭，但是滚动条保持隐藏状态。仅当单击关闭图标时，它才能完全正常工作。

当用户在弹出框之外单击时，是否可以设置自动溢出滚动？即不只是在关闭图标上？

 $(document).ready(function () {
 $("button#mainbtn").click(function (){
     $('body').css('overflow', 'hidden');  
 });

 $(document).on('click', '.closer',  function (){
     $('body').css('overflow', 'auto'); 
 });
 });


 <div id="myModal" class="modal" >
 <div class="modal-content">
 <div class="closer">&times;</div>
 </div>
 </div>

打开模式框的代码：

 var modal = document.getElementById('myModal');
 var btn = document.getElementById("mainbtn");
 var span = document.getElementsByClassName("closer")[0];
 btn.onclick = function() {
  modal.style.display = "block";
 }

span.onclick = function() {
modal.style.display = "none";
}

window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}

css：

 .modal {
  display: none; 
  z-index: 100; 
  padding-top: 100px; 
  position:fixed;
  top: 0;
  width: 100%;
  height: 100%; 
  }


.modal-content {
background-color: #f2f2f2;
margin: auto;
position:relative;
width: 60%;
height:90%;
  transition: all 5s ease-in-out;
}

.closer {
top:0px;
right:20px;
 color: #00284d;
position:absolute;
font-size: 45px;

}

Answer 1

当您附加了一个事件以关闭模式时，如果他们在事件外部单击，则可以在隐藏模式后将溢出设置为自动。

window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
    $('body').css('overflow', 'auto'); 
    }
}

Answer 2

您可以制作一个$("html").click(function()并检查您的弹出窗口是可见还是隐藏。每次在整个页面上单击都会执行该功能

$("html").click(function() {
  if($('.popup').is(":visible")){
  alert("visible: dont show scroll")
  }
  else{
  alert("hidden: show scroll")
  }
});

$("button").click(function() {
   $('.popup').toggle();
  });

body{
background-color: blue;
height; 1000px;
width: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="popup">popup</div>
<button>toggle popup</button>
</body>

用户单击弹出窗口外部以将其关闭时返回滚动条

2 个答案: