This time I will share jQuery Plugin and tutorial about Minimal Static Modal Dialog Plugin – jQuery miniModal, hope it will help you in programming stack.
| File Size: | 6.4 KB |
|---|---|
| Views Total: | 316 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
miniModal is a lightweight, easy-to-use, cross-browser jQuery modal plugin which loads HTML content in the DOM into a modal overlay when triggered.
More features:
- Custom close link & events.
- Allows to append to any container element.
- Lots of options and callbacks.
- Easy to style using your own CSS experience.
How to use it:
1. Insert your modal content into a container element as follow:
1 |
<div class="content"> |
2 |
Modal Content Goes Here |
3 |
</div> |
2. Load jQuery JavaScript library and the jQuery miniModal plugin’s script in the document.
1 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" |
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"> |
4 |
</script> |
5 |
<script src="jquery.minimodal.js"></script> |
3. Load the modal content in a modal popup.
1 |
$.miniModal({ |
2 |
load: $('.content'), |
3 |
onLoad: function(){ |
4 |
$('.content').show(); |
5 |
} |
6 |
}); |
4. Apply custom styles to the modal popup as follows:
01 |
#overlay { |
02 |
position: absolute; |
03 |
top: 0; left: 0; |
04 |
right: 0; bottom: 0; |
05 |
background: black; |
06 |
opacity: 0.4; |
07 |
z-index: 10; |
08 |
display: none; |
09 |
cursor: pointer; |
10 |
} |
11 |
12 |
#modal_base { |
13 |
z-index: 15; |
14 |
position: absolute; |
15 |
display: none; |
16 |
} |
17 |
18 |
.modal { |
19 |
padding: 20px; |
20 |
color: #111; |
21 |
display: block; |
22 |
background: #EEE; |
23 |
font: bold 12px Arial; |
24 |
border-radius: 20px; |
25 |
border: 10px solid #111; |
26 |
box-shadow: 0 0 30px #333; |
27 |
} |
28 |
29 |
.content { |
30 |
display: none; |
31 |
} |
5. Customize the modal popup by overiding the following settings.
01 |
$.miniModal({ |
02 |
03 |
// parent container |
04 |
appendTo: 'body', |
05 |
06 |
// text for close link |
07 |
closeTxt: '[close]', |
08 |
09 |
// fade transition in ms |
10 |
fade: 0, |
11 |
12 |
// height/width |
13 |
height: null, |
14 |
width: null, |
15 |
16 |
// shows close button |
17 |
close: true, |
18 |
19 |
// close by pressing ESC |
20 |
escClose: true, |
21 |
22 |
// close by clicking overlay |
23 |
overlayClose: true, |
24 |
25 |
// auto positioning |
26 |
position: true, |
27 |
28 |
// absolutly positioned |
29 |
absolute: false, |
30 |
31 |
// modal mode |
32 |
modal: true, |
33 |
34 |
// shows overlay |
35 |
overlay: true, |
36 |
37 |
// overlay ID |
38 |
overlayId: 'overlay', |
39 |
40 |
// modal ID |
41 |
modalId: 'modal_base', |
42 |
43 |
// id of close link |
44 |
closeId: 'modal_close', |
45 |
46 |
// modal class |
47 |
style: 'modal' |
48 |
|
49 |
}); |
6. Available callback functions.
01 |
$.miniModal({ |
02 |
03 |
onOpen: function() {}, |
04 |
onCreate: function() {}, |
05 |
onLoad: function() {}, |
06 |
onDisplay: function() {}, |
07 |
onClose: function() {}, |
08 |
onResize: function() {}, |
09 |
onKill: function() {}, |
10 |
beforeClose: function() {}, |
11 |
|
12 |
}); |
This awesome jQuery plugin is developed by kuzin. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
