模式添加/删除

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覆盖的属性？有时它对我有效，有时无效。我需要注意什么