Basic Modal

The basic modal requires .modal-window & .modal classes.

            
              <div id="modal-window">
                  <div class="modal">
                      <!-- Modal Content -->
                  </div>
              </div>
            
          

JavaScript is not included in the library. In a script element (or in a seperate .js file), add the following JS code:

            
              const openBtn = document.getElementById("open-modal");
              const closeBtn = document.getElementById("close-modal");

              const modalWindow = document.querySelector(".modal-window");

              openBtn.addEventListener("click", () => {
                  modalWindow.classList.add("is-active");
              });
              closeBtn.addEventListener("click", () => {
                  modalWindow.classList.remove("is-active");
              });
            
          

Basic Modal using <dialog>

If you use the new <dialog> element then you don't need the .modal-window class in the parent element.

            
              <dialog id="demo-modal" class="modal">
                  <!-- Modal Content -->
              </dialog>
            
          

JavaScript is not included in the library. To trigger and close the modal, you can refer to the code below:

            
            const openBtnDialog = document.getElementById("open-modal-dialog");
            const closeBtnDialog = document.getElementById("close-modal-dialog");

            const modal = document.getElementById("demo-modal");

            openBtnDialog.addEventListener("click", () => modal.showModal());
            closeBtnDialog.addEventListener("click", () => modal.close());