Basic Inline Modal Popup Plugin - ModalWindowJS

ModalWindowJS is a jQuery based modal plugin for creating inline modal windows that pop up in front of other elements on the webpage.

How to use it:

1. Include the necessary JavaScript and CSS files on the webpage.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/modal-window.js"></script>

2. Insert your own modal content and a close button to the modal. Note that modal content will be hidden until triggered.

<div class="modalContent example">
  <p class="closeBtn">Close</p>
  <p>Modal Content Here</p>
</div>

3. Create a trigger button and specify the target modal content using the 'data-modal' attribute:

<button class="trigger" 
        data-modal="singular">
        Launch The Modal
</button>

4. Initialize the modal plugin with default settings.

$(function(){
  $(document).modalWindow();
});

5. Apply your own CSS styles to the modal window.

#overLay{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}

.modalContent {
  display: none;
  overflow:auto;
  position: absolute;
  z-index: 1000;
  padding: 20px;
  background:#ffffff;
  color: #000000;
}

.closeBtn{
  position: absolute;
  top: 10px;
  right: 10px;
}

6. To customize the modal window, override the following settings and then pass them to the 'modalWindow()' function.

$(document).modalWindow({

  // default CSS selectors
  "openTrigger": ".trigger",
  "closeTrigger": ".closeBtn",
  "modalContent": ".modalContent",
  "overLay" : "overLay",

  // width/height of the modal window
  "width" : 500,
  "height": 500,

  // animation speed in milliseconds
  "feadSpeed" : 500
  
});

---

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