如何在网站上使用多种模式？

Question

试图弄清楚如何在我的网站上使用多种模式。 我有一个工作正常，但尝试使用第二个触发相同的javascript动作，但不会弹出模式。我需要一个用于制作多个模式的系统，因为我的想法是使每个模式都有一个显示dicord用户名的弹出框。 我在下面粘贴了我的代码：

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn1");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.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";
  }
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content {
  background-color: #7289da;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 10%;
  /* Could be more or less, depending on screen size */
}


/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<li id="myBtn1"><a><i class="fa fa-"><center><img height="20px" 
src="/images/icons/discord.png"></center></i></a></li>
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <h3 style="color:white;font-weight:bold;">Discord</h3>
    <p style="color:white;font-weight:bold;font-style: italic;">text</p>
  </div>

</div>

Answer 1

详细信息

您可以使用querySelectorAll轻松实现这一点，这将返回DOM元素的HTMLCollection。然后，您可以使用下面所述的forEach函数，就我个人而言，我发现这种方法比使用传统的for循环更具可读性。

PS

HTMLCollection与Array不同，如果您想将HTMLCollection转换为Array，则可以通过{{3} }。还有其他方法可以将类似Array的对象转换为Array，即[].slice.call(HTMLCollection)，如果您希望支持旧版浏览器或仅支持那些不支持的浏览器，则可以使用后一种方法支持Array.from。

// Self invoked function. 
(function() {

  // List all of the buttons. 
  var btns = document.querySelectorAll("ul li a");

  // List all of the modals.
  var modals = document.querySelectorAll(".modal");

  // The on click handler.
  var onClickAction = function(index) {
    // Get the modal by index.
    var modal = modals[index];

    if (modal != null) {
      modal.style.display = "block";

      // Now get the span.
      var closeBtn = modal.querySelector(".close");
      closeBtn.onclick = function() {
        modal.style.display = "none";
      };

      // Re-assign the window event. 
      window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      }
    };
  };

  // Loop over each button. 
  btns.forEach(function(btn, index) {
    btn.onclick = function() {
      onClickAction(index);
    };
  });

})();

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content {
  background-color: #7289da;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 10%;
  /* Could be more or less, depending on screen size */
}


/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<ul>
  <li id="myBtn1">
    <a>
      <i class="fa fa-">
      <center><img height="20px" src="/images/icons/discord.png"></center>
      </i>
    </a>
  </li>

  <li id="myBtn2">
    <a>
      <i class="fa fa-">
      <center><img height="20px" src="/images/icons/discord.png"></center>
      </i>
    </a>
  </li>
</ul>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h3 style="color:white;font-weight:bold;">Discord</h3>
    <p style="color:white;font-weight:bold;font-style: italic;">text - 1</p>
  </div>
</div>

<div id="myModal2" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h3 style="color:white;font-weight:bold;">Discord</h3>
    <p style="color:white;font-weight:bold;font-style: italic;">text - 2</p>
  </div>
</div>