This time I will share jQuery Plugin and tutorial about Lightweight AJAX Modal Window Plugin In jQuery, hope it will help you in programming stack.
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:
1 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
2 |
<script src="modal-load-content.js"></script> |
2. Add the following modal styles to your CSS file.
01 |
.modal-load-content-container { |
02 |
background-color: #fff; |
04 |
box-shadow: 2px 2px 7px rgba(15, 16, 21, 0.1); |
14 |
.modal-load-content-container.opened { display: block; } |
16 |
.modal-load-content-container > * { padding: 20px; } |
18 |
.modal-load-content-overlay { |
19 |
background-color: rgba(0, 0, 0, 0.4); |
29 |
.modal-load-content-overlay.opened { display: block; } |
3. Initialize the plugin and we’re ready to go.
1 |
$('.call-to-action').modalLoadContent({ |
4. Create a modal trigger link and specify the content to be loaded in the modal as this:
5. The trigger links could be any DOM elements such as buttons:
1 |
<button class="call-to-action" |
6. You can also load specific elements of the external page into the modal window.
1 |
<a class="call-to-action" |
2 |
data-target=".your-selector" |
Change log:
2017-09-29
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.
