HTML双重弹出

Question

I'm still kind of new on coding, and I'm helping some friends with some stuff. 我仍然是编码方面的新手，并且正在为一些朋友提供一些帮助。

So, I made a pop-up text inside my code, this with a button, I want to make a 2nd and up to a 4th one, each with it's own text and specific stuff, but I haven't been able to, any help please? 所以，我在代码中制作了一个弹出文本，用一个按钮，我想创建一个第2到第4个文本，每个文本都有自己的文本和特定内容，但我一直无法做到请帮助？

Here's my code. 这是我的代码。

 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">&times;</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>

Answer 1

Check below snippet. 检查以下代码段。 Give all modal a unique ID and put the same value in target of the button. 为所有模式赋予唯一的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">&times;</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">&times;</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">&times;</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">&times;</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>

HTML双重弹出

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-03-16 09:12:49

HTML双重弹出

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-03-16 09:12:49

解决方案1
0 已采纳 2017-03-16 09:12:49