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

Question

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

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

请参阅下面的代码笔：

 <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

你可以试试这个

var elements= document.getElementsByClassName("menu-btn") Array.from(test).forEach(function(element) { element.addEventListener('click', openModal); });

Answer 2

首先：您应该Select所有按钮使用：

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

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

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

见working Example

Answer 3

你可以给按钮传三个不同的ID，然后通过ID打开如下模型

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

更改js如下

// Get open modal button
const modalBtn = document.getElementById('modalBtn');
const modalBtn01 = document.getElementById('modalBtn01');
const modalBtn02 = document.getElementById('modalBtn02');

// Listen for OPEN Click
modalBtn.addEventListener('click', openModal);
modalBtn01.addEventListener('click', openModal);
modalBtn02.addEventListener('click', openModal);

// 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.querySelectorAll('.modal-btn');
// Get close button
const closeBtn = document.getElementsByClassName('closeBtn')[0];

// Listen  for OPEN Click
modalBtn.forEach(function(e) {
e.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";
  }
}

/* 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;
}

 <a id="modalBtn" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
 <a id="modalBtn01" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
 <a id="modalBtn02" 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>
  </div>

Answer 4

试试这个代码。

<script>
const modal = document.getElementById('simpleModal');
// All page modals
var modals = document.querySelectorAll('.modal');
// Get open modal button
const modalBtn = document.getElementsByClassName('modal-btn');
// Get close button
const closeBtn = document.getElementsByClassName('closeBtn')[0];
console.log(modalBtn);
for(var i=0; i < modalBtn.length; i++){

    modalBtn[i].addEventListener("click", openModal);


}
// 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";
  }
}
</script>

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

How can I get 1 modal on multiple buttons on page?

html

javascript

css

modal-dialog

button