javascript - 模态添加/删除

Question

HTML：

 <!-- hero  -->
      <div class="hero">
        <div class="banner">
          <h1>Modal</h1>
          <button class="btn modal-btn">open modal</button>
        </div>
      </div>
      <!-- end of hero  -->
      <!-- modal  -->
      <div class="modal-overlay">
        <div class="modal-container">
          <h4>
            Some lorem
          </h4>
          <button class="close-btn">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <!-- end of modal  -->

CSS：

.modal-overlay {
  /*Some css codes to modify overlay*/
  visibility: hidden;
  z-index: -10;
}
.open-modal {
  visibility: visible;
  z-index: 10;
}

JS：

const btnModal = document.querySelector('.modal-btn');
const overlayModal = document.querySelector('.modal-overlay');
const btnCloseModal = document.querySelector('.close-btn');
function openModal(){
  overlayModal.classList.add('open-modal')
}
function closeModal(){
  overlayModal.classList.remove('open-modal')
}
btnModal.addEventListener('click',openModal)
btnCloseModal.addEventListener('click', closeModal)

1. 它是模态最有效的方法吗？
2. .open-modal 如何覆盖 .modal-overlay 的属性？有时它对我有用，有时对我有用。我需要注意什么？

Answer 1

1. 是的。人们通常使用display: block和display: none。但visibilty也可以。

2. 您的课程不会被删除。您可以尝试使用，如果这可以解决您的问题

element.style.display = 'block' //

这里有一些参考https://gomakethings.com/two-ways-to-set-an-elements-css-with-vanilla-javascript/