javascript - 如何添加超过 1 个模态框？

Question

我从这里找到了如何使用 html 制作模态框:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2 我不知道如何制作多个作品，我尝试过复制和粘贴，但只能制作第一个作品。

Answer 1

您应该在由第二个 button 元素触发的 HTML 页面中添加第二个 modal。

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

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

---

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

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

此外，在您的 JS 代码中，复制您的绑定(bind):

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

// 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];
var span2 = document.getElementsByClassName("close")[1];

试试这个 jsfiddle我为你做的。