jQuery & CSS3 Powered Modal Window Effects - Nifty.js

jQuery & CSS3 Powered Modal Window Effects - Nifty.js
File Size: 32.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.