我已经创建了一个模态窗口,其中我可以一个一个地打开两个模态窗口,并且它具有类似地一个一个地关闭它们的功能(关闭第二个窗口可使先前的窗口保持活动状态)
(我将代码段中的所有代码都包含在内)
let open_modals = [];
$(function () {
// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function (e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
open_modals.push(modal.id);
}
}
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function () {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
modals[index].style.display = "none";
open_modals.pop();
setTimeout(function () {
for (var index in modals) {
modals[index].classList.remove("modal-content-active");
modal.style.display = "none";
open_modals.pop();
}
}, 400);
}
}
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
modals[index].style.display = "none";
open_modals.pop();
setTimeout(function () {
for (var index in modals) {
modals[index].classList.remove("modal-content-active");
modal.style.display = "none";
open_modals.pop();
}
}, 400);
}
}
}
}
})
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
/* The Modal (background) */
.modal {
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 0.1875em;
/* 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 {
color: white;
position: relative;
background-color: #171B20;
margin: auto;
padding: 0;
border: 0.0625em solid #888;
width: 97%;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.2), 0 0.375em 1.25em 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
@-webkit-keyframes animateBottom {
from {
top: 0px;
opacity: 1;
}
to {
top: 500px;
opacity: 0;
}
}
@keyframes animateBottom {
from {
top: 0px;
opacity: 1;
}
to {
top: 300px;
opacity: 0;
}
}
.modal-content-active {
-webkit-animation-name: animateBottom;
-webkit-animation-duration: 0.4s;
animation-name: animateBottom;
animation-duration: 0.4s;
}
/* The Close Button */
.close {
color: #F0B823;
float: right;
font-size: 9vw;
font-weight: bold;
position: absolute;
right: 0.25em;
top: -0.25em;
}
.close:hover,
.close:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 0.125em 1em;
background-color: #171B20;
color: #F0B823;
}
.modal-body {}
.modal-button {
font-family: 'Quicksand', sans-serif;
background-color: #171B20;
border: none;
color: white;
padding: 0.248em 0.496em;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 7vw;
margin: 0.124em 0.062em;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0;
cursor: pointer;
width: auto;
}
.modal-button:hover {
background-color: #171B20;
color: #F0B823;
}
.pic {
margin: auto;
display: block;
height: auto;
width: 50vh;
}
.headertext {
font-family: 'Quicksand', sans-serif;
display: block;
text-align: center;
font-size: 6.50vw;
}
.bodytext {
font-size: 3.90vw;
font-family: 'Quicksand', sans-serif;
display: block;
padding: 0.625em 0.9375em;
}
p {
display: block;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<a href="#myModal1" class="modal-button">• Click Me</a>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="headertext">
<p>Modal Header</p>
</div>
</div>
<div class="modal-body">
<img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
<div class="bodytext">
<h2 class="modal-button" href="#myModal2">Enable Second Modal Window by tapping on this text</h2>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="headertext">
<p>Modal Header 2</p>
</div>
</div>
<div class="modal-body">
<img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
<div class="bodytext">
<h2 class="modal-button" href="#myModal2">You have opened modal window no.2</h2>
</div>
</div>
</div>
</div>
加载后尝试关闭模式窗口,在控制台输出中出现问题标题中提到的错误
[在另一个音符上 从JavaScript代码底部删除这些行(两次)可解决问题]
setTimeout(function () {
for (var index in modals) {
modals[index].classList.remove("modal-content-active");
modal.style.display = "none";
open_modals.pop();
}
}, 400);
但这部分是动画,我不能跳过 希望有人可以为此提出建议
预先感谢
答案 0 :(得分:2)
let open_modals = [];
$(function () {
// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function (e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
open_modals.push(modal.id);
}
}
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function () {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
modals[index].classList.add("modal-content-active");
var item = modals[index];
setTimeout(function () {
item.classList.remove("modal-content-active");
item.style.display = "none";
open_modals.pop();
}, 400);
}
}
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
modals[index].classList.add("modal-content-active");
var item = modals[index];
setTimeout(function () {
item.classList.remove("modal-content-active");
item.style.display = "none";
open_modals.pop();
}, 400);
}
}
}
}
})