Блог

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? Иногда это работало для меня, иногда нет. На что мне нужно обратить внимание?

1. Да, это так. Люди обычно используют display: block и display: none . Но visibilty тоже хорошо.
2. Ваш класс не удаляется. Вы можете попробовать использовать, если это решит вашу проблему

 element.style.display = 'block' //
 

Вот некоторые ссылки https://gomakethings.com/two-ways-to-set-an-elements-css-with-vanilla-javascript /