我在编码方面仍然很新,而且我正在帮助一些有些东西的朋友。在HTML中弹出双弹出
所以,我在代码里面做了一个弹出式文本,这个按钮是一个按钮,我想做一个第二到第四个,每个都有自己的文本和特定的东西,但是我没有能够,请任何帮助吗?
这是我的代码。
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>
'“于是,我做了一个弹出文本我的代码里面,这有一个按钮,我想打一个第二和高达4一个,每个都有它自己的文本和具体的东西“”嗯,什么? –
为什么不使用相同的代码来创建其他按钮和模式?或者你是否复制了别人的代码并且不理解它? –