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

问题在于：

var modal = document.querySelectorAll('.simpleModal');

modal是NodeList，而不是元素。如果您想选择单个.simpleModal，请使用querySelector代替querySelectorAll。

像这样定义modal：

var modal = document.querySelector('.simpleModal');

（你也可以对closeBtn做同样的事情 - 当你只想选择一个元素时避免使用querySelectorAll，而是使用普通的querySelector）

Answer 2

这样的事情应该有效。

当您点击按钮时，它会获得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>

如何使用addEventListener（），querySelectorAll和getElementsByClassName作为弹出框

2 个答案: