Skip to main content

Modals / Dialogs

Custom elegance, simple and beautiful modals, and dialogs to use on your website.

Default modal​

Note: the class is-opened is used to open the modal.

Modal title

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet culpa ea eum molestias nihil non odio quaerat quas quidem tempore. Architecto dolorum eius error labore necessitatibus omnis optio repellat tenetur?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur at beatae doloremque enim, eos esse eum eveniet harum id iste magnam, mollitia nostrum optio, recusandae rem sequi suscipit voluptate.

HTML
<!-- Launch modal -->
<button class="button button-primary open-modal mb-4">
  Launch modal
</button>

<!-- Modal -->
<div class="modal-wrap is-opened">
  <div class="backdrop "></div>
  <div class="modal">
    <div class="modal-head">
      <h4 class="modal-title">...</h4>
      <a href="#!" class="modal-close close-modal"><icon /></a>
    </div>
    <div class="modal-content">...</div>
    <div class="modal-footer">...</div>
  </div>
</div>
Javascript
const modalWrap = document.querySelector(".modal-wrap");
const openModal = document.querySelector(".open-modal");
const closeModal = document.querySelectorAll(".close-modal");

openModal.addEventListener("click", () => {
  modalWrap.classList.toggle("is-opened");
})

closeModal.forEach(button => {
  button.addEventListener("click", () => {
    modalWrap.classList.toggle("is-opened");
  });
});

Right modal​

Note: the class is-opened is used to open the modal.

Modal title

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet culpa ea eum molestias nihil non odio quaerat quas quidem tempore. Architecto dolorum eius error labore necessitatibus omnis optio repellat tenetur?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur at beatae doloremque enim, eos esse eum eveniet harum id iste magnam, mollitia nostrum optio, recusandae rem sequi suscipit voluptate.

<div class="modal-wrap modal-right is-opened">
  <div class="backdrop"></div>
  <div class="modal">
    ...
  </div>
</div>

Left modal​

Note: the class is-opened is used to open the modal.

Modal title

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet culpa ea eum molestias nihil non odio quaerat quas quidem tempore. Architecto dolorum eius error labore necessitatibus omnis optio repellat tenetur?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur at beatae doloremque enim, eos esse eum eveniet harum id iste magnam, mollitia nostrum optio, recusandae rem sequi suscipit voluptate.

<div class="modal-wrap modal-left is-opened">
  <div class="backdrop"></div>
  <div class="modal">
    ...
  </div>
</div>

Call to action modal​

Note: the class is-opened is used to open the modal.

Call to action

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet culpa ea eum molestias nihil non odio quaerat quas quidem tempore. Architecto dolorum eius error labore necessitatibus omnis optio repellat tenetur?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur at beatae doloremque enim, eos esse eum eveniet harum id iste magnam, mollitia nostrum optio, recusandae rem sequi suscipit voluptate.

<div class="modal-wrap modal-cta is-opened">
  <div class="backdrop" />
  <div class="modal">
    <div class="modal-image">
      <img src="..." alt="..." />
    </div>
    <div class="modal-content">
      <a
        href="#!"
        class="modal-close"
      >
        ...
      </a>
      ...
      <div class="field has-button mt-8">
        <div class="input-button">
          <input type="text" class="input" placeholder="..." />
          <button type="button" class="button button-info">...</button>
        </div>
      </div>
    </div>
  </div>
</div>

Default dialog​

If you want to learn more about <dialog></dialog> tag. You can read about it here

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda, blanditiis corporis distinctio doloribus ducimus eaque est eveniet fugit harum magni nesciunt perferendis possimus rerum saepe sequi temporibus veniam vitae.

HTML
<dialog id="dialogId" class="dialog">
  ...
</dialog>
Javascript
document.querySelector(".open-dialog").addEventListener("click", () => {
  if (document.querySelector("#dialogId").hasAttribute("open")) {
    return document.querySelector("#dialogId").removeAttribute("open");
  }
  return document.querySelector("#dialogId").show();
});

Dialog with form​

Greetings, one and all!

<dialog open class="dialog">
  <form method="dialog">
    <buttons />
  </form>
</dialog>