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="https://code.jquery.com/jquery-3.4.1.min.js" 
        integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" 
        crossorigin="anonymous">
</script>
<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>
  </div>
</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.

$('.modal-container.example').modal();

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

$('.modal-container.example').modal({
  animationSpeed: 500
});

6. Override the default data attribute:

$('.modal-container.example').modal({
  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.