Lightweight AJAX Modal Window Plugin In jQuery
File Size: | 14.5 KB |
---|---|
Views Total: | 1666 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.