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.