我在编码方面还是个新手，我正在帮助一些 friend 做一些事情。
所以，我在我的代码中制作了一个弹出文本，它带有一个按钮，我想制作第二个和最多第四个，每个都有自己的文本和特定的东西，但我一直做不到有什么帮助吗？
这是我的代码。
var modal = document.getElementById('myModal1');
var btn = document.getElementById("myBtn1");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<body style="background-color:#FFE4C4;">
<div class="container-fluid">
<br><br>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<!-- Trigger/Open The Modal -->
<button id="myBtn1" class="button"><H1>FRUTAS Y VERDURAS</H1></button>
<div id="myModal1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<ol style="list-style-type: 1">
<li>Deben lavarse con agua y utilizar media cucharada de cloro.</li>
<li>Lavar las frutas y verduras y si es necesario dejarlas en agua con el cloro y escurrirlas después de 30 minutos.</li>
<li>Secarlas bien.</li>
</ol>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</body>最佳答案
检查下面的片段。给所有模态一个唯一的 ID 并将相同的值放在按钮的 target 中。
var modal;
btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click',btnClick,false);
}
spans = document.getElementsByClassName('close');
for (var i = 0; i < spans.length; i++) {
spans[i].addEventListener('click',spanClick,false);
}
function btnClick() {
modal = document.getElementById(this.getAttribute("target"));
modal.style.display = "block";
}
function spanClick() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<div class="container-fluid">
<br><br>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<!-- Trigger/Open The Modal -->
<button id="myBtn1" class="button" target="myModal1"><H1>FRUTAS Y VERDURAS</H1></button>
<button id="myBtn1" class="button" target="myModal2"><H1>FRUTAS Y VERDURAS</H1></button>
<button id="myBtn1" class="button" target="myModal3"><H1>FRUTAS Y VERDURAS</H1></button>
<button id="myBtn1" class="button" target="myModal4"><H1>FRUTAS Y VERDURAS</H1></button>
<div id="myModal1" class="modal">
<div class="modal-content">
<span class="close">×</span>
1
<ol style="list-style-type: 1">
<li>Deben lavarse con agua y utilizar media cucharada de cloro.</li>
<li>Lavar las frutas y verduras y si es necesario dejarlas en agua con el cloro y escurrirlas después de 30 minutos.</li>
<li>Secarlas bien.</li>
</ol>
</div>
</div>
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
2
<ol style="list-style-type: 1">
<li>Deben lavarse con agua y utilizar media cucharada de cloro.</li>
<li>Lavar las frutas y verduras y si es necesario dejarlas en agua con el cloro y escurrirlas después de 30 minutos.</li>
<li>Secarlas bien.</li>
</ol>
</div>
</div>
<div id="myModal3" class="modal">
<div class="modal-content">
<span class="close">×</span>
3
<ol style="list-style-type: 1">
<li>Deben lavarse con agua y utilizar media cucharada de cloro.</li>
<li>Lavar las frutas y verduras y si es necesario dejarlas en agua con el cloro y escurrirlas después de 30 minutos.</li>
<li>Secarlas bien.</li>
</ol>
</div>
</div>
<div id="myModal4" class="modal">
<div class="modal-content">
<span class="close">×</span>
4
<ol style="list-style-type: 1">
<li>Deben lavarse con agua y utilizar media cucharada de cloro.</li>
<li>Lavar las frutas y verduras y si es necesario dejarlas en agua con el cloro y escurrirlas después de 30 minutos.</li>
<li>Secarlas bien.</li>
</ol>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>关于javascript - HTML 中的双弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42829085/