Javascript 模式窗口未关闭问题
我已经使用HTML、CSS和JavaScript创建了一个模式,我可以一起打开两个模式窗口, 我可以一个接一个地关闭它们(即,关闭第二个窗口会使第一个窗口保持活动状态,就像我想要的那样) 在这之前一切都很好,没有问题 我首先附加这些工作代码,以便您以后可以将其与有缺陷的JavaScript代码进行比较:Javascript 模式窗口未关闭问题,javascript,html,css,arrays,dom-events,Javascript,Html,Css,Arrays,Dom Events,我已经使用HTML、CSS和JavaScript创建了一个模式,我可以一起打开两个模式窗口, 我可以一个接一个地关闭它们(即,关闭第二个窗口会使第一个窗口保持活动状态,就像我想要的那样) 在这之前一切都很好,没有问题 我首先附加这些工作代码,以便您以后可以将其与有缺陷的JavaScript代码进行比较: let open_modals = []; $(function() { // Get the button that opens the modal // read all the
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();
}
}
}
}
// 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();
}
}
}
}
})
现在是我为什么发布这篇文章的真正问题了我想在模态窗口关闭时添加底部滑动动画,所以我在CSS中定义了动画,并通过
setTimeout
函数在JavaScript中添加了相同的动画
现在我在这里成功地添加了动画,但我把事情搞砸了
如果同时打开两个模式窗口(首先打开一个窗口,然后通过该窗口正文中的文本打开第二个窗口),然后尝试逐个关闭它们
只有第二个窗口会关闭,第一个窗口根本不会关闭
(如果您只是打开第一个窗口并尝试将其关闭,那么效果相当不错。只有当两个窗口都打开时,第一个窗口的关闭活动才会出现问题)
现在,我在附加JavaScript代码的地方添加了setTimeout
,并弄乱了导致上述问题的东西:
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");
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].classList.add("modal-content-active");
setTimeout(function(){
for (var index in modals) {
modals[index].classList.remove("modal-content-active");
modal.style.display = "none";
open_modals.pop();
}
},400);
}
}
}
}
})
let open_modals=[];
$(函数(){
//获取打开模式对话框的按钮
//读取任何类型的所有控件,该控件的类为模态按钮
var btn=document.queryselectoral(“.modal按钮”);
//所有页面模态
var modals=document.querySelectorAll('.modal');
//获取关闭模态的元素
var span=document.getElementsByClassName(“关闭”);
//当用户单击该按钮时,打开模式对话框
对于(变量i=0;i
是否有人可以调整JavaScript代码,使其在使用我的setTimeout
动画时修复上述问题?
(您可以将顶部没有设置超时动画的原始工作JavaScript与下面有错误的JavaScript代码进行比较,以便轻松完成此操作)
更新:控制台出现以下错误:
未捕获的TypeError:无法读取未定义的属性“remove”
使用底部提到的有缺陷的JavaScript代码
如果有人想看到被窃听的代码在这里运行-这是因为你在
setTimeout
中弹出了所有打开的模态,你应该只弹出最新的模态。我在下面的代码片段中修复了您的代码:
let open_modals=[];
$(函数(){
//获取打开模式对话框的按钮
//读取任何类型的所有控件,该控件的类为模态按钮
var btn=document.queryselectoral(“.modal按钮”);
//所有页面模态
var modals=document.querySelectorAll('.modal');
//获取关闭模态的元素
var span=document.getElementsByClassName(“关闭”);
//当用户单击该按钮时,打开模式对话框
对于(变量i=0;i
@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;
}
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");
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].classList.add("modal-content-active");
setTimeout(function(){
for (var index in modals) {
modals[index].classList.remove("modal-content-active");
modal.style.display = "none";
open_modals.pop();
}
},400);
}
}
}
}
})