Press "Enter" to skip to content

A Simple and Lightweight Vanilla JS Modal Popup Component

The typical vanilla js modal component is only 2 KB with no dependencies, with ESC option close, outside click close, custom height, width. This JavaScript library to show embedded content in a modal style animated popup.

How to make use of it:

1. Create the content for the modal and make it invisible on the web page load.

<div id="modalContent" style="display:none">
 <h2>Modal Title</h2>
 <p>Modal Content Here</p>
</div>

2. Load the modal.css and modal.js from the dist folder.

<link rel="stylesheet" href="src/modal.css" />
<script src="src/modal.js"></script>

3. Launch the modal window when needed.

modal.open('modalContent');

4. Close the modal window manually.

modal.close('modalContent');

Minimal Modal Popup For Inline Content, vanilla js modal component Plugin/Github

JS-Modal-Popup-Component-Demo


See Demo And Download

Official Website(idurar): Click Here

This superior jQuery/javascript plugin is developed by idurar. 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 *