我正在为用户点击我的三个按钮中的任何一个创建一个模式,目前它只对第一个按钮起作用,但是当我关闭模式并点击另一个按钮时,模式不会打开,我也不知道为什么。 我怎样才能使我的模式打开无论我已点击哪个按钮后关闭它?
下面是我的HTML:
<div class="modal" id="modal">
<button id="close">X</button>
<h5>Modal</h5>
</div>
<div class="column-container">
<div class="first-column">
<h3>Affiliate Manager</h3>
<br>
<p>
If you are passionate about Affiliate marketing and searching for your next career achievement, please do not hesitate to contact us.
</p>
</div>
<div class="second-column">
<button class="apply-btn jsModalTrigger open">APPLY NOW</button>
</div>
<div class="first-column">
<h3>Affiliate Manager</h3>
<br>
<p>
If you are passionate about Affiliate marketing and searching for your next career achievement, please do not hesitate to contact us.
</p>
</div>
<div class="second-column">
<button class="apply-btn jsModalTrigger open">APPLY NOW</button>
</div>
<div class="first-column">
<h3>Affiliate Manager</h3>
<br>
<p>
If you are passionate about Affiliate marketing and searching for your next career achievement, please do not hesitate to contact us.
</p>
</div>
<div class="second-column">
<button class="apply-btn jsModalTrigger open">APPLY NOW</button>
</div>
我的CSS:
.modal {
width: 300px;
height: 150px;
margin: auto auto;
background: #34495e;
display: none;
}
.modal button {
right: 0;
top: 0;
}
和我的JavaScript:
var btnOpen = document.querySelector(".open");
var btnClose = document.getElementById("close");
var modal = document.getElementById("modal");
btnOpen.onclick = function(){
modal.style.display = "block";
}
btnClose.onclick = function(){
modal.style.display = "none";
}
您只是在dom中获取类名为open的第一个元素。 更改此内容:
var btnOpen = document.querySelector(".open");
致下列人员:
var btnsOpen = document.querySelectorAll(".open");
这将返回一个元素数组。
然后您必须遍历该数组并添加事件
btnsOpen.forEach(btn=>{
btn.onclick = function(){
modal.style.display = "block";
}
})
null
var btnsOpen = document.querySelectorAll(".open");
var btnClose = document.getElementById("close");
var modal = document.getElementById("modal");
btnsOpen.forEach(btn=>{
btn.onclick = function(){
modal.style.display = "block";
}
})
btnClose.onclick = function(){
modal.style.display = "none";
}
<div class="modal" id="modal">
<button id="close">X</button>
<h5>Modal</h5>
</div>
<div class="column-container">
<div class="first-column">
<h3>Affiliate Manager</h3>
<br>
<p>
If you are passionate about Affiliate marketing and searching for your next career achievement, please do not hesitate to contact us.
</p>
</div>
<div class="second-column">
<button class="apply-btn jsModalTrigger open">APPLY NOW</button>
</div>
<div class="first-column">
<h3>Affiliate Manager</h3>
<br>
<p>
If you are passionate about Affiliate marketing and searching for your next career achievement, please do not hesitate to contact us.
</p>
</div>
<div class="second-column">
<button class="apply-btn jsModalTrigger open">APPLY NOW</button>
</div>
<div class="first-column">
<h3>Affiliate Manager</h3>
<br>
<p>
If you are passionate about Affiliate marketing and searching for your next career achievement, please do not hesitate to contact us.
</p>
</div>
<div class="second-column">
<button class="apply-btn jsModalTrigger open">APPLY NOW</button>
</div>