Question

因此，我有一个函数可以在单击模态外部的任何地方时将其关闭。这是代码：

var modal = document.getElementById('quickViewModal');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
      $('.item').removeClass('modal-carousel-fix');
      $('.modal-backdrop').css('display','none')
      $('.quickview-modal').css('display','none');
      $(this).parent().closest('.carousel-inner').css('overflow', 'hidden');
    }
}

html看起来像这样

<div class="modal quickview-modal" id="quickViewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <p>Modal Content</p>
      </div>
    </div>
  </div>
</div>

但是，当我更改JS以通过类名获取模态时，它将停止工作。

这是代码：

var modal = document.getElementsByClassName('quickview-modal');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
      $('.item').removeClass('modal-carousel-fix');
      $('.modal-backdrop').css('display','none')
      $('.quickview-modal').css('display','none');
      $(this).parent().closest('.carousel-inner').css('overflow', 'hidden');
    }
}

我之所以尝试按类名获取模式，是因为它是产品的快速查看模式，所以其中有多个，因此，如果我通过ID获取代码，则该代码仅适用于第一项。

Answer 1

因为您将有一个通过类名获取的数组元素，而不仅仅是1个元素。

按ID而不按类获取元素时，JavaScript函数可关闭模式工作

1 个答案: