Lightweight AJAX Modal Window Plugin In jQuery

File Size: 14.5 KB
Views Total: 1662
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight AJAX Modal Window Plugin In jQuery

A minimal, clean, dynamic, responsive jQuery modal window plugin that loads remote or local html content using AJAX requests.

How to use it:

1. Load the script 'modal-load-content.js' after loading jQuery JavaScript library:

<script src="//"></script>
<script src="modal-load-content.js"></script>

2. Add the following modal styles to your CSS file.

.modal-load-content-container {
  background-color: #fff;
  border: 0;
  box-shadow: 2px 2px 7px rgba(15, 16, 21, 0.1);
  display: none;
  margin: 0;
  overflow: hidden;
  overflow-y: auto;
  position: fixed;
  width: 600px;
  z-index: 101;

.modal-load-content-container.opened { display: block; }

.modal-load-content-container > * { padding: 20px; }

.modal-load-content-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;

.modal-load-content-overlay.opened { display: block; }

3. Initialize the plugin and we're ready to go.

  debugMode: true // default: false

4. Create a modal trigger link and specify the content to be loaded in the modal as this:

<a class="call-to-action" href="">JQuery Script</a>

5. The trigger links could be any DOM elements such as buttons:

<button class="call-to-action" 
        jQuery Script

6. You can also load specific elements of the external page into the modal window.

<a class="call-to-action" 
   jQuery Script

Change log:


  • Fix JSHint warnings


  • added close link to modal

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