Modal

A modal is a dialog box/popup window that is displayed on top of the current page.

Below is an example for modal.

            
          <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'));