Press "Enter" to skip to content

Easy Create a Modal Window With JavaScript and jQuery

Modal with JavaScript and jQuery – The animation itself was easy because it was a simple attachment and class separation. An easy-to-use static modal window component that loads modal content directly from any element in the document.

pure javascript modal, javascript modal popup, which plugin is used to create a modal window, jquery modal popup, pure javascript popup modal, animated modal popup using jquery

How to make use of 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">Easy Create a Modal Window With JavaScript and jQuery</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 obligatory CSS kinds for the modal window.

.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");
  });
});

Easy Modal Window In jQuery Plugin/Github, jquery modal popup example, jquery modal popup on page load


See Demo And Download 

Official Website(ryu0947): Click Here

This superior jQuery/javascript plugin is developed by ryu0947. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *