javascript - 如何使用 addEventListener() 、 querySelectorAll 和 getElementsByClassName 弹出框

Question

我想在我的网站上放置一个具有相同 ID 的弹出框。单击按钮后应显示这些弹出框。这些按钮具有相同的 ID。

我的脚本代码是

<script type="text/javascript">
    // Get modal element
var modal = document.querySelectorAll('.simpleModal');
// Get open modal button
var modalBtn = document.querySelectorAll('.modalBtn');
// Get close button
var closeBtn = document.querySelectorAll('.closeBtn')[0];

for (var i = 0; i < modalBtn.length; i++) {
       modalBtn[i].addEventListener('click', openModal);
        // Listen for close click
       closeBtn[i].addEventListener('click', closeModal);
       window.addEventListener('click', outsideClick);
    }

function openModal(){
  modal.style.display = 'block';
}

// Function to close modal
function closeModal(){
  modal.style.display = 'none';
}

// Function to close modal if outside click
function outsideClick(e){
  if(e.target == modal){
    modal.style.display = 'none';
  }
}
</script>

我的 HTML 代码如下，我提到此代码使用从数据库导出的数据。

<?php echo"<a href='single.php'><img title=' ' alt=' ' src='images/$row2[pic]'></a>
            <p>Cookware</p>
            <h4>$ $row2[price] <span>$45.00</span></h4>"?>
        </div>

        <?php echo"
        <button  class='modalBtn button'>Details</button>
          <div class='simpleModal modal'>
            <div class='modal-content'>
              <div class='modal-header'>
                  <span class='closeBtn'>&times;</span>
                 <h2>Modal Header</h2>
              </div>
              <div class='modal-body'>
                <p>$row2[name]</p>
                <p>$row2[description]</p>
              </div>
              <div class='modal-footer'>
                <h3>Modal Footer</h3>
              </div>
            </div>
          </div>
    </div>"?>

我的 HTML 代码

<div class="agile_top_brands_grids">                      
    <div class="col-md-4 top_brand_left">
        <div class="hover14 column">
            <div class="agile_top_brand_left_grid">
                <div class="agile_top_brand_left_grid_pos">
                    <img src="images/offer.png" alt=" " class="img-responsive">
                </div>
                <div class="agile_top_brand_left_grid1">
                    <figure>
                        <div class="snipcart-item block">
                            <div class="snipcart-thumb">
                                <a href='single.php'><img title=' ' alt=' ' src='images/c.png'></a>
                                <p>Cookware</p>
                                <h4>452<span>$45.00</span></h4>"?>
                            </div>

                            <button id='modalBtn'  class=' button'>Details</button>
                              <div id='simpleModal'  class=' modal'>
                                <div class='modal-content'>
                                  <div class='modal-header'>
                                      <span class='closeBtn'>&times;</span>
                                     <h2>Modal Header</h2>
                                  </div>
                                  <div class='modal-body'>
                                    <p>biscuit</p>
                                    <p>tasty food</p>
                                  </div>
                                  <div class='modal-footer'>
                                    <h3>Modal Footer</h3>
                                  </div>
                                </div>
                              </div>

                              <button id='modalBtn' class=' button'>Details</button>
                              <div id='simpleModal' class=' modal'>
                                <div class='modal-content'>
                                  <div class='modal-header'>
                                      <span class='closeBtn'>&times;</span>
                                     <h2>Modal Header</h2>
                                  </div>
                                  <div class='modal-body'>
                                    <p>biscuit</p>
                                    <p>tasty food</p>
                                  </div>
                                  <div class='modal-footer'>
                                    <h3>Modal Footer</h3>
                                  </div>
                                </div>
                              </div>

                              <button id='modalBtn' class=' button'>Details</button>
                              <div id='simpleModal' class=' modal'>
                                <div class='modal-content'>
                                  <div class='modal-header'>
                                      <span class='closeBtn'>&times;</span>
                                     <h2>Modal Header</h2>
                                  </div>
                                  <div class='modal-body'>
                                    <p>biscuit</p>
                                    <p>tasty food</p>
                                  </div>
                                  <div class='modal-footer'>
                                    <h3>Modal Footer</h3>
                                  </div>
                                </div>
                              </div>

                              <button id='modalBtn' class=' button'>Details</button>
                              <div id='simpleModal' class='modal'>
                                <div class='modal-content'>
                                  <div class='modal-header'>
                                      <span class='closeBtn'>&times;</span>
                                     <h2>Modal Header</h2>
                                  </div>
                                  <div class='modal-body'>
                                    <p>biscuit</p>
                                    <p>tasty food</p>
                                  </div>
                                  <div class='modal-footer'>
                                    <h3>Modal Footer</h3>
                                  </div>
                                </div>
                              </div>

                              <button  id'modalBtn' class=' button'>Details</button>
                              <div id='simpleModal' class=' modal'>
                                <div class='modal-content'>
                                  <div class='modal-header'>
                                      <span class='closeBtn'>&times;</span>
                                     <h2>Modal Header</h2>
                                  </div>
                                  <div class='modal-body'>
                                    <p>biscuit</p>
                                    <p>tasty food</p>
                                  </div>
                                  <div class='modal-footer'>
                                    <h3>Modal Footer</h3>
                                  </div>
                                </div>
                              </div>
                        </div>

                    </figure>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

像这样的东西应该有效。

当您单击该按钮时，它会显示 nextElementSibling这是您的情况下的模式并显示它。

当您单击关闭时，它会通过遍历父级来获取模态，并将其隐藏。

当您单击窗口时，它会检查单击是否来自模式内部，如果不是则隐藏。

var modalBtn = document.querySelectorAll('.modalBtn');
var closeBtn = document.querySelectorAll('.closeBtn');

for (var i = 0; i < modalBtn.length; i++) {
  modalBtn[i].addEventListener('click', openModal);
  // Listen for close click
  closeBtn[i].addEventListener('click', closeModal);
  window.addEventListener('click', outsideClick);
}

function getModal(child) {
  var modal = child.parentNode;

  while (modal && modal.className && !modal.className.includes("simpleModal")) {
    modal = modal.parentNode;
  }
  return modal;
}

function openModal() {
  var modal = this.nextElementSibling;

  if (modal && modal.className.includes("simpleModal")) {
    modal.style.display = 'block';
  }
}

// Function to close modal
function closeModal() {
  var modal = getModal(this);
  if (modal)
    modal.style.display = 'none';
}

// Function to close modal if outside click
function outsideClick(e) {
  if (e.target && !e.target.className.includes("simpleModal") &&
    !getModal(e.target)) {
    e.target.style.display = 'none';
  }
}

.modal {
  display: none;
}

<button class='modalBtn button'>Details</button>
<div class='simpleModal modal'>
  <div class='modal-content'>
    <div class='modal-header'>
      <span class='closeBtn'>&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class='modal-body'>
      <p>$row2[name]</p>
      <p>$row2[description]</p>
    </div>
    <div class='modal-footer'>
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>