This time I will share jQuery Plugin and tutorial about Easy jQuery Modal Plugin with CSS3 Animations – Quick Modal, hope it will help you in programming stack.
| File Size: | 53.2 KB |
|---|---|
| Views Total: | 3125 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
An easy, fast jQuery plugin which helps you create a modal window with nice animations powered by CSS3 transitions and transforms.
How to use it:
1. Embed your modal content into a container element with an unique ID.
1 |
<div id="demo" class="modal"> |
2 |
<div class="close-modal"></div> |
3 |
<a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a> content here |
4 |
</div> |
2. Create a modal toggle link that points to the modal ID using data-modal-id attribute.
1 |
<a href="#" data-modal-id="demo" class="open-modal">Open Modal</a> |
3. Add JQuery library and the jQuery Quick Modal plugin to your web page.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="js/jquery.quickmodal.js"></script> |
4. Call the plugin on the toggle link.
1 |
$('.open-modal').quickmodal(); |
5. Style the modal window in your CSS.
01 |
.modal { |
02 |
-webkit-transition: all 250ms ease; |
03 |
-moz-transition: all 250ms ease; |
04 |
-ms-transition: all 250ms ease; |
05 |
-o-transition: all 250ms ease; |
06 |
transition: all 250ms ease; |
07 |
box-sizing: border-box; |
08 |
padding: 18px; |
09 |
background-color: #8E44AD; |
10 |
color:#fff; |
11 |
border-radius: 3px; |
12 |
width: 50%; |
13 |
display: none; |
14 |
opacity: 0; |
15 |
margin-top: 0; |
16 |
position: fixed; |
17 |
top: 50%; |
18 |
left: 50%; |
19 |
transform: translate(-50%, -50%) scale(1.5); |
20 |
z-index: 9999; |
21 |
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25); |
22 |
} |
23 |
24 |
.modal.visible { |
25 |
opacity: 1; |
26 |
margin-top: -100px; |
27 |
transform: translate(-50%, -50%) scale(1); |
28 |
} |
6. Style the modal close button.
01 |
.modal .close-modal { |
02 |
position: absolute; |
03 |
top: 0; |
04 |
right: 0; |
05 |
padding: 18px; |
06 |
cursor: pointer; |
07 |
color: #ccc; |
08 |
} |
09 |
10 |
.modal .close-modal:after { |
11 |
content: '2716'; |
12 |
display: inline-block; |
13 |
font-size: 20px; |
14 |
} |
15 |
16 |
.modal .close-modal:focus { outline: none; } |
7. Style the modal background.
01 |
#modal-background { |
02 |
-webkit-transition: all 250ms ease; |
03 |
-moz-transition: all 250ms ease; |
04 |
-ms-transition: all 250ms ease; |
05 |
-o-transition: all 250ms ease; |
06 |
transition: all 250ms ease; |
07 |
display: none; |
08 |
opacity: 0; |
09 |
background-color: rgba(0, 0, 0, 0.8); |
10 |
position: fixed; |
11 |
z-index: 9998; |
12 |
top: 0; |
13 |
left: 0; |
14 |
width: 100%; |
15 |
height: 100%; |
16 |
} |
17 |
18 |
#modal-background.visible { opacity: 1; } |
8. Available options.
01 |
// <a href="https://www.jqueryscript.net/animation/">Animation</a> CSS |
02 |
animation: 'fade-zoom', |
03 |
04 |
// Animation speed |
05 |
speed: 250, |
06 |
07 |
// timing funciton |
08 |
timing: 'ease', |
09 |
10 |
// CSS selector for close link |
11 |
closeModalSelector: '.close-modal', |
12 |
13 |
// ESC key to close the modal |
14 |
enableEsc: true, |
15 |
16 |
// Click to close the modal |
17 |
enableClickAway: true, |
18 |
19 |
// Enable body scroll on modal open |
20 |
enableBody<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>: false |
Change logs:
v2.1.0 (2017-08-29)
- Fixed an issue where modal backdrops were not animating properly when closing a modal
- Added the prefix option to support builds with custom prefixes
| File Size: | 11.4 KB |
|---|---|
| Views Total: | 435 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
source : jqueryscript.net
