This time I will share jQuery Plugin and tutorial about jQuery & CSS3 Powered Modal Window Effects – Nifty.js, hope it will help you in programming stack.
Nifty.js is a lightweight jQuery plugin that makes use of CSS3 and jQuery magic to recreate codrops’ Nifty Modal Window Effects.
How to use it:
1. Include the nifty.css in the head section of the web page.
1 |
< link rel = "stylesheet" href = "lib/nifty.css" > |
2. Include the latest jQuery library and the nifty.js at the bottom of the webpage.
1 |
< script src = "//code.jquery.com/jquery-2.1.3.min.js" ></ script > |
2 |
< script src = "lib/nifty.js" ></ script > |
3. Build the markup structure for the modal window.
01 |
< div class = "nifty-modal slide-in-right" id = "modal-1" > |
02 |
< div class = "md-content" > |
03 |
< div class = 'md-title' > |
07 |
< p >Modal content here</ p > |
08 |
< button class = "btn btn-primary md-close" >Close me!</ button > |
4. Create a button to toggle the modal window.
3 |
data-target = "#modal-1" > |
5. List of modal window effects modal styles with animations/transitions:
fade-in-scale
: Fade in and scale up
slide-in-right
: Slide from the right
slide-in-bottom
: Slide from the bottom
newspaper
: Newspaper
fall
: Fall
slide-fall-in
: Slide fall
slide-in-top
: Slide and stick to top
3d-flip-horizontal
: 3D flip horizontal
3d-flip-vertical
: 3D flip vertical
3d-sign
: 3D sign
super-scaled
: Super scaled
just-me
: Just me
3d-slit
: 3D slit
3d-rotate-bottom
: 3D Rotate from bottom
3d-rotate-in-left
: 3D Rotate in from left
fade-in-blur
: Blur
slide-in-bottom-perspective
: Slide in from bottom with perspective on container
slide-in-right-perspective
: Slide from right with perspective on container
slip-in-top-persepective
: Slip in from the top with perspective on container
1 |
< div class = "nifty-modal slide-in-right" id = "modal-1" > |
6. API methods.
2 |
$( "#modal-1" ).nifty( "show" ) |
5 |
$( "#modal-1" ).nifty( "hide" ) |
8 |
$( "#modal-1" ).nifty( "update" ) |
7. API events.
show.nifty.modal
: Fired immediately when the show method is called or when a button is clicked with a data-trigger attribute.
shown.nifty.modal
: Fired after the modal is finished showing. This waits for all the animations/transitions to finish.
hide.nifty.modal
: Fired immediately when the hide method is called, or when the close button on a modal is clicked.
hidden.nifty.modal
: Fired when the modal is finished being hidden and all animations/transitions are complete.
Change log:
2016-03-16
2016-02-21
2015-06-13
- Fixed 3d animation class names, since classes can’t start with numbers
This awesome jQuery plugin is developed by jsimnz. For more Advanced Usages, please check the demo page or visit the official website.