Javascript：我试图通过向元素添加一个类来操作HTML

我试图添加。隐藏到2类。然而，在运行代码后，我不能得到如果语句检查在网站上的变化状态，一旦发生了变化。总体目标:一旦在Modal外点击，我希望Modal关闭。

const modalButtons = document.querySelectorAll('.show-modal');
const modal = document.querySelector('.modal');
const closeModal = document.querySelector('.close-modal');
const overlay = document.querySelector('.overlay');
const body = document.body;
for (let i = 0; i < modalButtons.length; i++) {
modalButtons[i].addEventListener('click', function () {
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
});
if (!modal.classList.contains('hidden')) {
modal.addEventListener('click', function (e) {
if (modal.contains(e.target)) {
} else {
modal.classList.add('hidden');
overlay.classList.add('hidden');
}
});
} 
}

//HTML文件下面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Modal window</title>
</head>
<body>
<button class="show-modal">Show modal 1</button>
<button class="show-modal">Show modal 2</button>
<button class="show-modal">Show modal 3</button>
<div class="modal hidden">
<button class="close-modal">&times;</button>
<h1>I'm a modal window 😍</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div class="overlay hidden"></div>
<script src="script.js"></script>
</body>
</html>

没有看到你的html代码很难理解你的代码应该做什么。所以我建议不要将css类应用于模态/覆盖本身，而是将其应用于body，这样你就可以更好地控制其他元素在模态打开时的行为，例如，你可以模糊覆盖下的所有内容:

const modalButtons = document.querySelectorAll('.show-modal');
const modal = document.querySelector('.modal');
const closeModal = document.querySelector('.close-modal');
const overlay = document.querySelector('.overlay');
const body = document.body;
for (let i = 0; i < modalButtons.length; i++) {
modalButtons[i].addEventListener('click', function(e) {
document.body.classList.add('popup');
modal.querySelector(".body").title = e.target.textContent;
});
};
modal.addEventListener('click', function(e) {
if (e.target === overlay || e.target === closeModal) {
document.body.classList.remove('popup');
}
});

body:not(.popup) > .modal
{
display: none;
}
/* popup is opened */
body.popup > :not(.modal)
{
filter: blur(2px);
}
.overlay {
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
}
.modal
{
height: 100vh;
width: 100vw;
display: flex;
}
.modal > .content {
z-index: 999;
position: relative;
background-color: lightgreen;
border: 1px solid black;
width: 10em;
height: 10em;
padding-top: 1.5em;
display: flex;
margin: auto;
}
.modal .body:after
{
content: " opened by: " attr(title);
}
.modal .close-modal
{
position: absolute;
right: 0;
top: 0;
}

<div class="container">
<button class="show-modal">click 1</button>
<button class="show-modal">click 2</button>
<button class="show-modal">click 3</button>
</div>
<div class="modal">
<div class="overlay"></div>
<div class="content">
<div class="body">
this is modal popup
</div>
<button class="close-modal">close</button>
</div>
</div>

我相信这可能是一个可能的解决方案，你的问题(检查JS):

const modalButtons = document.querySelectorAll('.show-modal');
const modal = document.querySelector('.modal');
const closeModal = document.querySelector('.close-modal');
const overlay = document.querySelector('.overlay');
const body = document.body;
for (let i = 0; i < modalButtons.length; i++) {
modalButtons[i].addEventListener('click', function () {
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
document.addEventListener("click", (evt) => {
let targetEl = evt.target; // clicked element 
if(targetEl == overlay){//check to see if the overlay has been clicked then close the modal.
modal.classList.add("hidden");
overlay.classList.add("hidden");
}         
});
});      
/*if (!modal.classList.contains('hidden')) {
modal.addEventListener('click', function (e) {
if (modal.contains(e.target)) {
} else {
modal.classList.add('hidden');
overlay.classList.add('hidden');
}
});
}*/
}

.overlay{
background-color: rgba(100, 100, 100, 0.5);
width:50vw;
height:50vh;
}
.hidden{
opacity:0;
}
body{
background-color:black;
}
.modal{
width:50%;
height:50%;
border:1px solid black;
background:white;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

<body>
<div class="overlay hidden">Your overlay(click to close)
<img class="modal hidden center" alt="your modal">
</div>
<button class="show-modal">Show modal</button>
<button class="show-modal">Show modal</button>
<button class="show-modal">Show modal</button>
</body>

这是通过一个侦听器来检查点击在哪里启动来实现的。您可以将其修改为适用于多个模态，并在单击不同元素时使用(只需在检查哪个目标被选中时将其添加到条件if中，然后隐藏模态)。

相关内容

最新更新

热门标签：