Inline Static Modal Window In jQuery

File Size: 4.49 KB
Views Total: 403
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Inline Static Modal Window In jQuery

A simple lightweight lightbox overlay with jQuery that lets you create a static animated modal window using content from within the current web page.

How to use it:

1. Load jQuery library and the modal plugin in the web page.

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

2. Insert your content to the modal container. Note that your modal must have a unique ID.  The data-modal="close" is used to specify an element to close the modal window manually.

<div class="modal-container example">
  <div id="myModal" class="modal">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel fuga laudantium maxime consequuntur temporibus recusandae assumenda neque nesciunt pariatur culpa porro non illo, iusto veniam cum consequatur hic. Maiores, molestias?</p>
    <div class="btn" data-modal="close">Close</div>

3. Create a trigger element pointing to the modal you just created.

<div data-modal="#myModal">Open modal</div>

4. Initialize the plugin on the top container and done.


5. Customize the animation speed. Default: 300ms.

  animationSpeed: 500

6. Override the default data attribute:

  animationSpeed: 500,
  dataAttr: 'data-modal'

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