Modal

A modal is a web page element that displays in front of and deactivates all other page content. To return to the main content, the user must engage with the modal by completing an action or by closing it. Modals are often used to direct users attention to an important action or piece of information on a website or application. Modal's are also called A modal also called a modal window or lightbox

Examples

                   
  <button id="modal-btn" class="btn btn-square-solid bg-indigo-600">
  open modal
  </button>
                   
                

                  
  var modal = document.querySelector("#modal");

  var modalBtn = document.querySelector("#modal-btn");
              
  var closeBtn = document.querySelector(".modal-close-btn");
  console.log(closeBtn);
              
  modalBtn.onclick = function () {
  modal.style.display = "block";
  };
              
  closeBtn.onclick = function () {
  modal.style.display = "none";
  };
              
  window.onclick = function (event) {
  if (event.target == modal) {
  modal.style.display = "none";
  }
  };