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

Question

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

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');