Basic Inline Modal Popup Plugin - ModalWindowJS

File Size: 27 KB
Views Total: 2198
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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>

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

<button class="trigger" 
        Launch The Modal

4. Initialize the modal plugin with default settings.


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

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

.modalContent {
  display: none;
  position: absolute;
  z-index: 1000;
  padding: 20px;
  color: #000000;

  position: absolute;
  top: 10px;
  right: 10px;

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


  // 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.