Basic Inline Modal Popup Plugin - ModalWindowJS

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.

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.

  • Publication date: 28.08.2018
  • Source