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