模态窗口不关闭问题

Question

我已经使用 HTML、CSS 和 JavaScript 创建了一个模态，其中我可以同时打开 2 个模态窗口，并且可以一个一个地关闭它们（即关闭第二个窗口可以让第一个窗口保持活动状态，就像我想要的那样）。

到这里为止一切正常，没有问题。

我首先附上这些工作代码，以便您稍后可以将其与有问题的 JavaScript 代码进行比较：

let open_modals = [];

$(function() {

  // Get the button that opens the modal

  // read all the control of any type which has class as modal-button

  var btn = document.querySelectorAll(".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";

      open_modals.push(modal.id);

    }

  }

  // 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].id == open_modals[open_modals.length - 1]) {

          modals[index].style.display = "none";

          open_modals.pop();

        }

      }

    }

  }

  // 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].id == open_modals[open_modals.length - 1]) {

          modals[index].style.display = "none";

          open_modals.pop();

        }

      }

    }

  }

})