Question

我复制了我的模态按钮，问题是我无法显示＆＃34; Open Modal 2＆＃34;在我的代码中。

<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
    <span class="close">×</span>
    <p>Some text in the Modal..</p>
  </div>

这是我的完整代码： https://jsfiddle.net/dedi_wibisono17/xn3npwc4/

我该怎么办？谢谢

Answer 1

您应该为＆＃34; Open Modal 2＆＃34;使用不同的ID。元件。

根据W3School的定义和用法，

getElementById（）方法访问具有指定标识的第一个元素。

Answer 2

以我的拙见，你忽略了id的含义

两个按钮的ID相同，其中标题是Open Modal和Open Modal2

所以btn变量只与id为myBtn

的第一个元素相连

var btn = document.getElementById（“myBtn”）;

谢谢

Answer 3

试试这个。希望它有所帮助：）

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>

</div>

<button id="myBtn2">Open Modal 2</button>

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
 </div>

  </div>


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

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

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

  btn2.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";
}
}

Answer 4

您拥有相同的ID按钮＆＃34; Open Modal＆＃34;和＆＃34;开放模式2＆＃34;。当你写var btn = document.getElementById("myBtn");时，你得到了你的两个中的第一个按钮。以及仅为此第一个按钮绑定的任何事件。因此，您需要更改第二个按钮的ID，例如＆＃39; myBtn1＆＃39;并使用类似代码的东西来设置事件处理程序：

function setModal(btn,modal) {
    btn.onclick=function() {
        modal.style.display="block";
    }
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    var span=modal.querySelectorAll(".close") [0];
    span.onclick = function() {
         modal.style.display = "none";
    }
};

setModal(document.getElementById("myBtn"),document.getElementById('myModal'));
setModal(document.getElementById("myBtn1"),document.getElementById('myModal'));

我在这里修改了你的小提琴：https://jsfiddle.net/1fgmfpfc/

Answer 5

您的HTML ID在Javascript中存在冲突，这是您的代码的主要问题。 document.getElementById总是绑定你的上层HTML代码，就像当你将modal2代码更改为高于modal1然后modal2打开但未在modal1中打开时，所以定义不同的HTML id或尝试HTML id的动态名称。

无法创建多个按钮模式

5 个答案: