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="//code.jquery.com/jquery-3.2.1.min.js"></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.

$('.call-to-action').modalLoadContent({
  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="http://jquerscript.net">JQuery Script</a>

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

<button class="call-to-action" 
        data-href="http://jqueryscript.net">
        jQuery Script
</button>

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

<a class="call-to-action" 
   data-target=".your-selector" 
   href="http://jqueryscript.net">
   jQuery Script
</a>

Change log:

2017-09-29

• Fix JSHint warnings

2017-09-27

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