|File Size:||32.6 KB|
|Official Website:||Go to website|
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.
<link rel="stylesheet" href="lib/nifty.css">
2. Include the latest jQuery library and the nifty.js at the bottom of the webpage.
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src="lib/nifty.js"></script>
3. Build the markup structure for the modal window.
<div class="nifty-modal slide-in-right" id="modal-1"> <div class="md-content"> <div class='md-title'> <h3>Modal Dialog</h3> </div> <div class='md-body'> <p>Modal content here</p> <button class="btn btn-primary md-close">Close me!</button> </div> </div> </div>
4. Create a button to toggle the modal window.
<button data-trigger="modal" data-target="#modal-1"> Show Modal </button>
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
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
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
<div class="nifty-modal slide-in-right" id="modal-1">
6. API methods.
// show modal $("#modal-1").nifty("show") // hide modal $("#modal-1").nifty("hide") // update modal $("#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.
- added new methods.
- Fixed 3d animation class names, since classes can't start with numbers