Easy Modal Window In jQuery & Vanilla JavaScript

An easy-to-use static modal window component that loads modal content directly from any element of the document.

Can be implemented in either jQuery or Vanilla JavaScript.

How to use it:

1. Add the modal title, body, and close button to the modal container.

<div id="js-modal" class="modal">
  <div class="modal-container">
    <div class="modal-inner">
      <h1 class="modal-title">Modal Title</h1>
      <p class="modal-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus ligula eget metus egestas posuere. Curabitur lacus velit, fermentum non est sed, accumsan blandit leo.</p>
      <button id="js-close" class="modal-close" type="button">
        Close
      </button>
    </div>
  </div>
</div>

2. Create a button to toggle the modal.

<button id="js-open" class="modal-open" type="button">
  Launch Modal
</button>

3. The necessary CSS styles for the modal window. Feel free to modify & override the CSS rules below to create your own styles.

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  transition: opacity 0.7s ease-in-out, visiblity 0.7s ease-in-out;
  z-index: 1;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #333333;
  background: #ffffff;
  width: 350px;
  height: 150px;
  text-align: center;
  padding: 30px 50px;
}

.modal-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: inherit;
}

.modal-title {
  margin-bottom: 10px;
}

.modal-text {
  margin-bottom: 20px;
}

.modal-close {
  padding: 10px 20px;
  background: #333333;
  color: #ffffff;
}

4. Enable the modal window with vanilla JavaScript.

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

openBtn.addEventListener("click", () => {
  modal.classList.add("show");
});

closeBtn.addEventListener("click", () => {
  modal.classList.remove("show");
});

5. Enable the modal window with jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

$(function () {
  const modal = $("#js-modal");
  const openBtn = $("#js-open");
  const closeBtn = $("#js-close");

  openBtn.on("click", () => {
    modal.addClass("show");
  });

  closeBtn.on("click", () => {
    modal.removeClass("show");
  });
});

---

This awesome jQuery plugin is developed by ryu0947. For more Advanced Usages, please check the demo page or visit the official website.