javascript - 如何在页面上的多个按钮上获得 1 个模式？

Question

我正在处理的页面上有大约 4 个按钮，我需要弹出一条模式消息，然后用户才能继续操作。但是，我目前已将它们设置为 getElementById，因为有多个元素我无法使用 ID。

我尝试将其更改为 ClassName 和 SelectorAll，但我不确定如何让其他按钮显示模态，而不仅仅是第一个按钮。

请参阅下面的 Codepen:

Modal Buttons

 <a id="modalBtn" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
 <a id="modalBtn" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
 <a id="modalBtn" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
<!-- Modal -->

<div id="simpleModal" class="modal">
<div class="modal-content">
  <div class="modal-header">
    <span class="closeBtn">&times;</span>
    <h2>Please Read!</h2>
  </div>
  <div class="modal-body">
    <p>Concerning Online Orders:</p>
    <p>
      Dino's Pizza Company in Blue Mound, TX Online ordering system is for <em>CARRY OUT ONLY</em> at this time.
      If you would like to order DELIVERY, please contact the store at 817 232- 2244.
      <p>PLEASE NOTE: You are ordering for CARRY OUT at our ONLY location:
      1600 GILL STREET
      BLUE MOUND, TX 76131
      <br>Thank you for your business!
    </p>
    <a data-glf-cuid="06a81907-5b80-4290-9392-2c3b0b166ca8" data-glf-ruid="d4d87ac8-e97e-4fcf-a1bb-c8611f57c680"><button class="button">Continue to Order</button></a>
  </div>
  <div class="modal-footer">
  </div>
</div>

  /* Modal */

.modal-btn:focus {
  border: none;
} 
.modal-btn {
  background: #d30404;
  padding: 1em 2em;
  color: white;
  border: 0;
}  
.modal-btn:hover {
  background: #333;
} 
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0, .5);
} 
.modal-content {
  background-color: #f4f4f4;
  margin: 20% auto;
  padding: .5em;
  /* width: 400px; */
  width: 70%;
  box-shadow: 0 5px 8px 0 rgba(0,0,0, .2), 0 7px 20px 0 rgba(0,0,0, .17);
  animation-name: modalopen;
  animation-duration: 1.75s;
} 
@keyframes modalopen {
  from{opacity: 0}
  to {opacity: 1}
} 
.modal-header h2, .modal-footer h3 {
  margin: 0;
} 
.modal-header {
  background: #d30404;
  padding: 15px;
  color: white;
} 
.modal-body {
  padding: 10px 20px;
} 
.modal-footer {
  background: #d30404;
  padding: 10px;
  color: white;
  text-align: center;
}
.closeBtn {
  color: #ccc;
  float: right;
  font-size: 1.875em;
  color: white;
} 
.closeBtn:hover, .closeBtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
} 
.button {
  color: white;
  border: none;
  border-radius: 2em;
  padding: 1em 3.25em;
  background: #d30404;
}

// Modal Button

// Get modal element
const modal = document.getElementById('simpleModal');
// All page modals
var modals = document.querySelectorAll('.modal');
// Get open modal button
const modalBtn = document.getElementById('modalBtn');
// Get close button
const closeBtn = document.getElementsByClassName('closeBtn')[0];

// Listen for OPEN Click
modalBtn.addEventListener('click', openModal);
// Listen for CLOSE Click
closeBtn.addEventListener('click', closeModal);
// Listen for OUTSIDE Click
window.addEventListener('click', outsideClick);

// Function to OPEN modal
function openModal() {
  modal.style.display = "block";
}

// Function to CLOSE modal
function closeModal() {
  modal.style.display = "none";
}
// Function to CLOSE modal
function outsideClick(e) {
  if(e.target == modal) {
    modal.style.display = "none";
  }
}

Answer 1

首先:您应该使用以下方法选择所有按钮:

const modalBtn = document.querySelectorAll('.modal-btn');

第二个:循环抛出所有这些并添加事件监听器:

modalBtn.forEach(function(e) {
e.addEventListener('click', openModal);
})

参见 working Example