jQuery & CSS3 Powered Modal Window Effects - Nifty.js

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
• 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

<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.

Change log:

2016-03-16

• bugfix

2016-02-21

• added new methods.

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.