Javascript 从多个按钮打开单一模式框

我需要从多个按钮打开一个模式框

问题是它只在第一个按钮上工作

例如：

 <button id="myBtn" class="myBtn" style="cursor: pointer;">Click Me</button>
 <button id="myBtn" class="myBtn" style="cursor: pointer;">Click Me</button>

点击我
点击我

这是模态盒-

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
 <div class="modal-header">
  <span class="close">&times;</span>
  <h2>Modal Header</h2>
</div>
<div class="modal-body">
  <p>Some text in the Modal Body</p>
  <p>Some other text...</p>
</div>
<div class="modal-footer">
  <h3 style="margin: 5px ; ">Modal Footer</h3>
</div>

&时代；
模态头
情态体中的一些文本

其他一些文本

模态页脚

以下是脚本：

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

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

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

// When the user clicks 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";
}
}

//获取模式
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

您需要选择使用类名，并使用索引号或循环获取数组项

var btn = document.getElementsByClassName("myBtn");

btn[0].onclick = function() {
  modal.style.display = "block";
};

btn[1].onclick = function() {
  modal.style.display = "block";
};

---

看看这个。

您可以使用引导，这样所有这些问题看起来都很简单：

您可以添加任意数量的按钮

请查看这些代码，但需要在您的代码中包含这些boottsrap cdn：

引导示例
模态示例
开放模态
开放模态
&时代；
模态头
模态中的一些文本

接近

id

在

html

页面中必须是

唯一的

是否有解决方案？你在使用twitter引导程序吗？是的，我在使用引导程序。我不使用teitter引导程序，我想谢谢mate，但当数据库中有多个按钮时，我们该怎么做呢。一次又一次的增加。你不能，ID必须是唯一的。您可以通过使用jQuery来实现它，因为它将侦听类的任何实例，并从thereYes@abnithauhan激发模态，进行循环并执行赋值。或者，您可以依赖jQuery（如果可能的话），并在每次按钮动态来自数据库时使用类选择器重新分配变量。您至少可以在问题中添加“twitter引导”标签。