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

我有大约4个按钮在我的页面上，我需要有一个模式的消息弹出之前，用户可以进一步工作。但是，我目前已经将它们设置为getElementById，因为有多个元素我不能使用ID

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

请参阅下面的代码笔：

你可以试试这个

var elements=document.getElementsByClassName（“菜单btn”）
数组.from（test）.forEach（函数（元素）{
元素。addEventListener（'click'，OpenModel）；
});
首先：应使用以下选项选择所有按钮：

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

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

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

请参见
您可以为按钮传递三个不同的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>


//模式按钮
//获取模态元素
const modal=document.getElementById（'simpleModel'）；
//所有页面模态
var modals=document.querySelectorAll（'.modal'）；
//获取打开模式按钮
const modalBtn=document.queryselectoral（'.modal btn'）；
//接近按钮
const closeBtn=document.getElementsByClassName（'closeBtn'）[0]；
//收听打开的单击
modalBtn.forEach（函数（e）{
e、 addEventListener（'click'，OpenModel）；
})
//收听“关闭”按钮
closeBtn.addEventListener（'click'，closeModal）；
//收听外部点击
window.addEventListener（'click'，outsideClick）；
//函数打开模式
函数openModal（）{
modal.style.display=“块”；
}
//关闭模式的函数
函数closeModal（）{
modal.style.display=“无”；
}
//关闭模式的函数
函数外部单击（e）{
如果（例如，目标==模态）{
modal.style.display=“无”；
}
}
/*模态*/
.模态btn：焦点{
边界：无；
}
.模态btn{
背景：#d30404；
填料：1米2米；
颜色：白色；
边界：0；
}
.模态btn：悬停{
背景：#333；
}
.莫代尔{
显示：无；
位置：固定；
z指数：1；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgba（0,0,0,5）；
}
.模态内容{
背景色：#F4；
利润率：20%自动；
填充：.5em；
/*宽度：400px*/
宽度：70%；
盒影：0 5px 8px 0 rgba（0,0,0,2），0 7px 20px 0 rgba（0,0,0,17）；
动画名称：modalopen；
动画持续时间：1.75秒；
}
@关键帧modalopen{
从{opacity:0}
到{opacity:1}
}
.modal页眉h2、.modal页脚h3{
保证金：0；
}
.模态标题{
背景：#d30404；
填充：15px；
颜色：白色；
}
.模态体{
填充：10px 20px；
}
.模态页脚{
背景：#d30404；
填充：10px；
颜色：白色；
文本对齐：居中；
}
.关闭{
颜色：#ccc；
浮动：对；
字号：1.875em；
颜色：白色；
}
.closeBtn:悬停，.closeBtn:焦点{
颜色：#000；
文字装饰：无；
光标：指针；
}
.按钮{
颜色：白色；
边界：无；
边界半径：2米；
填料：1米3.25米；
背景：#d30404；
}
订单执行
订单执行
订单执行
&时代；
请阅读！
关于网上订单：


迪诺位于德克萨斯州蓝丘的比萨饼公司的在线订购系统目前仅用于执行。
如果您想订购送货服务，请致电817232-2244与商店联系。
请注意：您在我们唯一的地点订购：
吉尔街1600号
德克萨斯州蓝丘，邮编76131

谢谢你的生意！

继续订购
试试这个代码

<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>


const modal=document.getElementById（'simpleModel'）；
//所有页面模态
var modals=document.querySelectorAll（'.modal'）；
//获取打开模式按钮
const modalBtn=document.getElementsByClassName（'modal-btn'）；
//接近按钮
const closeBtn=document.getElementsByClassName（'closeBtn'）[0]；
console.log（modalBtn）；
对于（变量i=0；i
太好了，非常感谢您的帮助。函数中的快速问题我可以用任何东西替换（e）对吗？换句话说，如果我想更正的话，我可以放（函数（a））或其他什么东西？我还在学习Javascript，只是想看看我能做些什么，谢谢！当然可以，但请记住在函数中将其重新命名为
a.addEventListener
Ok真棒，这就是我的想法。我只是总的来说很好奇，以确保我了解它是如何工作的。感谢您在回答我的问题时给予的帮助和支持！
 <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>

// 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);

<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>