单页多模态windows（灵活的JS方案）

Question

问题
我正在寻找一个灵活的 javascript 解决方案来在同一页面上打开和关闭多个模式 windows。

我找到了以这种方式打开多个模式 windows 的方法，但我终究无法弄清楚如何通过单击按钮或单击外部按钮来关闭它们模态 window 本身。

这是我的 javascript 代码：

var openModal = document.getElementsByClassName("open-modal");

for (var i = 0; i < openModal.length; i++) {
    var thisOpenModal = openModal[i];

    thisOpenModal.addEventListener("click", function() {
        var modal = document.getElementById(this.dataset.modal);
        modal.style.display = "block";

    }, false);
}

（这段代码不是我自己写的，它是 "pgk's" 在本页回答的编辑副本：）

我通过将 'open-modal' class 添加到我的 "buttons" 来触发模态 windows 并且我使用 'data-modal' 与模态的 id 相关windows:

<div class="featurette-wrap featurette--anchor open-modal" data-modal="modal-microsoft-account">
   Opprett konto
</div>

上面的按钮触发 modal window id 为 modal-microsoft-account:

<div class="modal" id="modal-microsoft-account">
    Microsoft-konto
</div>

所以我的问题是：
我怎样才能实现一种方法来关闭模式 window 打开后？

我试过这样做，但我无法让它工作（来自 W3schools）：

// When the user clicks on <span> (x), close the modal
    closeModal.onclick = function() {
        modal.style.display = "none";
    }

// When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

Answer 1

最好使用事件侦听器来跟踪元素上的操作，就像我在下面所做的那样；

此外，在使用 Javascript 设置样式时使用 setAttribute 函数可确保覆盖分配给该元素的所有其他样式，并且始终应用您设置的样式（除非另一种风格被设置为重要）

var openModal = document.getElementsByClassName("open-modal");

for (var i = 0; i < openModal.length; i++) {
  var thisOpenModal = openModal[i];
  var targetModal = thisOpenModal.getAttribute('data-modal')
  //get the id of the modal to open based on thisOpenModal
  var thisTargetModal = document.getElementById(targetModal)
  //get element

  thisOpenModal.addEventListener("click", function(event) {
    thisTargetModal.setAttribute('style', "display:block;")
    //code to open modal on click of div with id=""
  }, false);


  // When the user clicks on <span> (x), close the modal
  var closeModal = document.querySelector('#' + thisTargetModal.id, "span");

  //code to listen to click event and change block style attribute to none on click
  closeModal.addEventListener("click", function() {
    thisTargetModal.setAttribute('style', "display:none;")
  }, false)


  // When the user clicks anywhere on the modal div, close it
  window.addEventListener("click", function(event) {
    //code to listen to click event on window and change block style attribute to none
    if (event.target == targetModal) {
      thisTargetModal.setAttribute('style', "display:none;")
    }
  })

}

<div class="featurette-wrap featurette--anchor open-modal" data-modal="modal-microsoft-account">
  Opprett konto
</div>

<div class="modal" id="modal-microsoft-account" style="display:none;">
  <p>Microsoft-konto </p>
  <p>
    <span id="close-modal">
    x
</span>
  </p>
</div>

Answer 2

所以我最终在 W3Schools 论坛上找到了一个完全符合我要求的解决方案：http://w3schools.invisionzone.com/topic/55976-multiple-modal-boxes-on-webpage/

这成功了：

// Get the modal
var modal = document.getElementsByClassName("modal");

// Get the button that opens the modal
var openModal = document.getElementsByClassName("open-modal");

// Get the <span> element that closes the modal
var closeModal = document.getElementsByClassName("modal__close");

// When the user clicks the button, open the modal
function setDataIndex() {
    for (i = 0; i < openModal.length; i++) {
        openModal[i].setAttribute('data-index', i);
        modal[i].setAttribute('data-index', i);
        closeModal[i].setAttribute('data-index', i);
    }
}

for (i = 0; i < openModal.length; i++) {
    openModal[i].onclick = function() {
        var ElementIndex = this.getAttribute('data-index');
        modal[ElementIndex].style.display = "block";
    };

    // When the user clicks on <span> (x), close the modal
    closeModal[i].onclick = function() {
        var ElementIndex = this.getAttribute('data-index');
        modal[ElementIndex].style.display = "none";
    };

}

window.onload = function() {
    setDataIndex();
};

window.onclick = function(event) {
    if (event.target === modal[event.target.getAttribute('data-index')]) {
        modal[event.target.getAttribute('data-index')].style.display = "none";
    }
};

单页多模态windows（灵活的JS方案）

Multiple modal windows on a single page (flexible JS solution)

javascript

modal-dialog