如何解决如何从 modalOverlay 和 closeBtn 中删除重复的代码?
我有不同的模态窗口,我添加了一个关闭按钮但面临重复的代码,我该如何缩短 modaloverlay 和 closeBtn 的代码?由于某种原因,第二个关闭按钮不起作用,请帮助https://jsfiddle.net/uza0jm8c/4/
enter code here
解决方法
您的代码仅将点击事件添加到第一个按钮。下面的代码将使两个按钮都起作用:
var closeBtn = document.getElementsByClassName("btn-close");
for (var i = 0; i < closeBtn.length; i++) {
closeBtn[i].addEventListener('click',(e) => {
modalOverlay.classList.remove('modal-overlay--visible');
modals.forEach((el) => {
el.classList.remove('modal--visible');
});
});
}
,
您有两个 closeBtn,您应该使用 document.querySelectorAll
并为您创建一个 forEach closeBtn
const btns = document.querySelectorAll('.btn');
const modalOverlay = document.querySelector('.modal-overlay');
const closeBtn = document.querySelectorAll('.btn-close');
const modals = document.querySelectorAll('.modal');
btns.forEach((el) => {
el.addEventListener('click',(e) => {
let path = e.currentTarget.getAttribute('data-path');
modals.forEach((el) => {
el.classList.remove('modal-overlay--visible');
});
document.querySelector(`[data-target="${path}"]`).classList.add('modal--visible')
modalOverlay.classList.add('modal-overlay--visible');
});
});
modalOverlay.addEventListener('click',(e) => {
if (e.target === modalOverlay) {
modalOverlay.classList.remove('modal-overlay--visible');
modals.forEach((el) => {
el.classList.remove('modal--visible');
});
}
});
closeBtn.forEach((el) => {
el.addEventListener('click',(e) => {
modalOverlay.classList.remove('modal-overlay--visible');
modals.forEach((el) => {
el.classList.remove('modal--visible');
});
});
});
.modal{
background-color: #fff;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
display: none;
}
.modal-overlay{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0.7);
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
z-index: 999;
}
.modal-overlay--visible{
opacity: 1;
visibility: visible;
transition: all 0.3s ease-in-out;
}
.modal--visible{
display: block;
}
<button class="btn header__box-btn" data-path="one">1</button>
<button class="btn header__box-btn" data-path="two">2</button>
<div class="modals">
<div class="modal-overlay">
<div class="modal modal--1" data-target="one">
modal 1
<button class="btn-close">close</button>
</div>
<div class="modal modal--2" data-target="two">
modal 2
<button class="btn-close">close</button>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。