Question

单击按钮时，同时出现两个模式框。当我在两个模式框之外单击时，它们将同时关闭。但是，问题是在同时关闭两个模式框后发生的。页面变暗，我无法滚动页面！

var modalA = document.getElementById('projectModalSecond2');

// Get the modal
var modal = document.getElementById('projectModal2');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  //alert(event.target)
  if (event.target == modal) {
    modal.style.display = "none";
    modalA.style.display = "none";
  }

  if (event.target == modalA) {
    modalA.style.display = "none";
    modal.style.display = "none";
  }
}

<div tabindex="0" class="modal fade pop-up-box-index pop-up-box-margin-left" id="projectModal2">
  <div class="modal-dialog">
    <div class="modal-content pop-up-box-top-margin pop-up-box-index">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><b>Substrate Map Station Controller (SMSC)</b></h4>
      </div>
      <div class="modal-body">
        <img src="assets/img/gallery/ULT_SDT1.jpg" alt="" class="img-responsive">
        <p>Full range of station controller.</p>
        <br>
      </div>
    </div>
  </div>
</div>

<div tabindex="0" class="modal fade pop-up-box-index pop-up-box-margin-right" id="projectModalSecond2">
  <div class="modal-dialog">
    <div class="modal-content pop-up-box-top-margin pop-up-box-index">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><b>Substrate Map Editor (SME)</b></h4>
      </div>
      <div class="modal-body">
        <img src="assets/img/gallery/ULT_SDT2.jpg" alt="" class="img-responsive">
        <p>Unit and Substrate map traceability</p>
        <br><br>
      </div>
    </div>
  </div>
</div>

Answer 1

好像您正在使用Bootstrap，在这种情况下，您可能正在使用jQuery。我看到您正在使用普通的javascript来完成这项工作，但是对于这种特殊情况，您应该考虑使用jQuery来关闭模态。

$('#projectModalSecond2').modal('hide');
$('#projectModal2').modal('hide');

关闭模式后页面变暗，无法向上或向下滚动

1 个答案: