作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经成功在我的网站上创建了多个模态,但是我只能关闭三个模态中的最后一个,即使它们具有 3 个独立的函数和 3 个不同的类。
如何才能使每个模式都通过相应的按钮打开,并在您单击模式窗口外时关闭。
HTML
<div class="container flex bg-black-opacity mt-40 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">
<!-- Modal content -->
<div class="modal-content">
<p>Some text in the Modal..</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 Heather Grey Sweatshirt</p>
<p class="text-white mt-4 ml-1 text-2xl">£15.00</p>
</div>
<div id="2mdl" class="modal2">
<!-- Modal content -->
<div class="modal-content">
<p>Some text in the Modal..</p>
</div>
</div>
<div class="container ml-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 Heather Grey Sweatshirt</p>
<p class="text-white mt-4 ml-1 text-2xl">£15.00</p>
</div>
<div id="3mdl" class="modal3">
<!-- Modal content -->
<div class="modal-content">
<p>Some text in the Modal..</p>
</div>
</div>
</div>
CSS
.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 {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
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");
btn1.onclick = function() {
modal1.style.display = "block";
}
btn2.onclick = function() {
modal2.style.display = "block";
}
btn3.onclick = function() {
modal3.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modal3) {
modal3.style.display = "none";
}
}
最佳答案
重新分配点击事件会覆盖之前绑定(bind)的回调函数
只需使用它(保持原始问题中的简化)
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
} else if (event.target == modal2) {
modal2.style.display = "none";
} else
if (event.target == modal3) {
modal3.style.display = "none";
}
}
关于javascript - 多个模态只能关闭1个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60789961/
有一条(相对)众所周知的 Perl 公理:“只有 Perl 可以解析 Perl”。我想知道 Perl 6 是否仍然如此? 扩大讨论...考虑到 PyPy 最近的更新,我想到了这个问题。 Perl 独特
这是设置。在上一个问题中,我发现我可以通过子组件中的状态传递对象属性,然后使用 componentDidUpdate 获取该对象属性。在这种情况下,状态和属性都称为到达。 这是基本代码... expo
我运行的是 10.5.2 社区版。我已经标记了 源/主要/资源 作为源目录。我可以右键单击并“编译”某些文件,据我所知,这意味着 IDE 将文件复制到与发送类文件的“com.mydomain.pack
我是一名优秀的程序员,十分优秀!