提问者:小点点

模式不为所有按钮打开


我正在为用户点击我的三个按钮中的任何一个创建一个模式,目前它只对第一个按钮起作用,但是当我关闭模式并点击另一个按钮时,模式不会打开,我也不知道为什么。 我怎样才能使我的模式打开无论我已点击哪个按钮后关闭它?

下面是我的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";
}

共1个答案

匿名用户

您只是在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>