Modal
A modal is a dialog box/popup window that is displayed on top of the current page.
Below is an example for modal.
Modal
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo commodi accusamus, porro officia perferendis autem est numquam magnam alias repudiandae, eligendi, odit earum
<div class="modal-display">
<button id="open" class="modal_btn btn-open">Click Me</button>
<div class="modal_container" id="modal_container">
<div class="modal">
<h1>Modal</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo
commodi accusamus, porro officia perferendis autem est numquam
magnam alias repudiandae, eligendi, odit earum
</p>
<button id="close" class="modal_btn">Close</button>
</div>
</div>
</div>
JavaScript code for using a Modal.
const open = document.querySelector('#open');
const modal_container = document.querySelector('#modal_container');
const close = document.querySelector('#close');
open.addEventListener('click', () => {
modal_container.style.zIndex='1';
modal_container.classList.add('show');
});
close.addEventListener('click', () => modal_container.classList.remove('show'));