[英]How do I make the close button work on my modals
我有 3 个全屏模态,它们打开得非常好,我只需要能够使用其中带有 × 的跨度关闭它们,我似乎无法在单击十字时关闭模态。
我尝试使用以下方法但它似乎不起作用,即使类似的代码适用于在模态窗口之外单击(当它们不是全屏时)
span.onclick = function(event) {
if (
event.target.id == modal1.id ||
event.target.id == modal2.id ||
event.target.id == modal3.id
) {
document.getElementById(event.target.id).style.display = "none";
}
}
HTML
<div class="container flex bg-black-opacity mt-64 rounded pt-10 pb-12 mb-10 mx-auto items-center">
<div class="container ml-5 cursor-pointer" id='1btn'>
<img src="assets/img/merch-1.png" alt="" style='height: 400px;' class='shadow-pink'>
<p class='uppercase mt-4 text-white'>Vice Versa 2020 Heather Grey Sweatshirt</p>
<p class="text-white mt-4 ml-1 text-2xl">£15.00</p>
</div>
<div id="1mdl" class="modal1">
<div class="modal-content">
<span class="close">×</span>
<img src="assets/img/merch-1.png" alt="" style='height: 800px;' class='shadow-pink'>
<p class='uppercase mt-4 text-white'>Vice Versa 2020 Heather Grey Sweatshirt</p>
<p class="text-white mt-4 ml-1 text-2xl">£15.00</p>
</div>
</div>
<div class="container ml-5 cursor-pointer" id='2btn'>
<img src="assets/img/merch-2.png" alt="" style='height: 400px;' class='shadow-pink'>
<p class='uppercase mt-4 text-white'>Vice Versa 2020 Black T-Shirt</p>
<p class="text-white mt-4 ml-1 text-2xl">£10.00</p>
</div>
<div id="2mdl" class="modal2">
<div class="modal-content">
<span class="close">×</span>
<img src="assets/img/merch-2.png" alt="" style='height: 800px;' class='shadow-pink'>
<p class='uppercase mt-4 text-white'>Vice Versa 2020 Black T-Shirt</p>
<p class="text-white mt-4 ml-1 text-2xl">£10.00</p>
</div>
</div>
<div class="container ml-5 mr-5 cursor-pointer" id='3btn'>
<img src="assets/img/merch-3.png" alt="" style='height: 400px;' class='shadow-pink'>
<p class='uppercase mt-4 text-white'>Vice Versa 2020 Black Tote Bag</p>
<p class="text-white mt-4 ml-1 text-2xl">£5.00</p>
</div>
<div id="3mdl" class="modal3">
<div class="modal-content">
<span class="close">×</span>
<img src="assets/img/merch-3.png" alt="" style='height: 800px;' class='shadow-pink'>
<p class='uppercase mt-4 text-white'>Vice Versa 2020 Black Tote Bag</p>
<p class="text-white mt-4 ml-1 text-2xl">£5.00</p>
</div>
</div>
</div>
社会保障局
/* Merch */
/* The Modal (background) */
.modal1 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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 */
}
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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 */
}
.modal3 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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/Box */
.modal-content {
.close {
color: #fff;
float: right;
font-size: 10rem;
}
img{
margin: 0 auto;
margin-top: 15rem;
text-align: center;
}
background-color: #131B1D;
margin: 0 auto;
text-align: center;
padding: 20px;
border: 1px solid #888;
width: 100vw;
height: 100vh;
}
JavaScript
var modal1 = document.getElementById("1mdl");
var modal2 = document.getElementById("2mdl");
var modal3 = document.getElementById("3mdl");
var btn1 = document.getElementById("1btn");
var btn2 = document.getElementById("2btn");
var btn3 = document.getElementById("3btn");
var span = document.getElementsByClassName("close1");
btn1.onclick = function() {
modal1.style.display = "block";
}
btn2.onclick = function() {
modal2.style.display = "block";
}
btn3.onclick = function() {
modal3.style.display = "block";
}
span.onclick = function() {
modal1.style.display = "none";
}
简单地说:
document.querySelectorAll('span.close').forEach(sp=>
{
sp.onclick=()=> sp.parentNode.parentNode.style.display = "none";
})
代码的所有其他部分也可以更简单。 像那样:
document.querySelectorAll('div.bt4modal').forEach(dv=> { dv.onclick=()=> document.getElementById(dv.dataset.modalId).style.display = "block"; }) document.querySelectorAll('span.close').forEach(sp=> { sp.onclick=()=> sp.parentNode.parentNode.style.display = "none"; })
.modals { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ 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/Box */ .modal-content { background-color: #131B1D; margin: 0 auto; text-align: center; padding: 20px; border: 1px solid #888; width: 100vw; height: 100vh; } .modal-content .close { color: #fff; float: right; font-size: 10rem; } .modal-content img { margin: 0 auto; margin-top: 15rem; text-align: center; } .bt4modal >img { height: 400px; } .modal-content >img { height: 800px; }
<div class="container flex bg-black-opacity mt-64 rounded pt-10 pb-12 mb-10 mx-auto items-center"> <div class="container ml-5 cursor-pointer bt4modal" data-modal-id="modal-1"> <img src="https://picsum.photos/400" alt="" class="shadow-pink"> <p class='uppercase mt-4 text-white'>Vice Versa 2020 Heather Grey Sweatshirt</p> <p class="text-white mt-4 ml-1 text-2xl">£15.00</p> </div> <div id="modal-1" class="modals"> <div class="modal-content"> <span class="close">×</span> <img src="https://picsum.photos/800" alt="" class="shadow-pink"> <p class='uppercase mt-4 text-white'>Vice Versa 2020 Heather Grey Sweatshirt</p> <p class="text-white mt-4 ml-1 text-2xl">£15.00</p> </div> </div> <div class="container ml-5 cursor-pointer bt4modal" data-modal-id="modal-2"> <img src="https://picsum.photos/400" alt="" class="shadow-pink"> <p class='uppercase mt-4 text-white'>Vice Versa 2020 Black T-Shirt</p> <p class="text-white mt-4 ml-1 text-2xl">£10.00</p> </div> <div id="modal-2" class="modals"> <div class="modal-content"> <span class="close">×</span> <img src="https://picsum.photos/800" alt="" class="shadow-pink"> <p class='uppercase mt-4 text-white'>Vice Versa 2020 Black T-Shirt</p> <p class="text-white mt-4 ml-1 text-2xl">£10.00</p> </div> </div> <div class="container ml-5 mr-5 cursor-pointer bt4modal" data-modal-id="modal-3"> <img src="https://picsum.photos/400" alt="" class="shadow-pink"> <p class='uppercase mt-4 text-white'>Vice Versa 2020 Black Tote Bag</p> <p class="text-white mt-4 ml-1 text-2xl">£5.00</p> </div> <div id="modal-3" class="modals"> <div class="modal-content"> <span class="close">×</span> <img src="https://picsum.photos/800" alt="" class="shadow-pink"> <p class='uppercase mt-4 text-white'>Vice Versa 2020 Black Tote Bag</p> <p class="text-white mt-4 ml-1 text-2xl">£5.00</p> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.