jQuery Based Modal Windows With Cool CSS3 Animations - NiftyModals

File Size: 79.9 KB
Views Total: 2521
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Based Modal Windows With Cool CSS3 Animations - NiftyModals

NiftyModals is a jQuery version of the Codrops' Nifty Modal Window Effects that helps you create modal windows with stunning animation effects using jQuery and CSS3.

How to use it:

1. Load jQuery library and the jQuery niftymodals plugin's files in the html file.

<link rel="stylesheet" href="dist/jquery.niftymodals.css">  
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="dist/jquery.niftymodals.js"></script>

2. You need to load the following polyfills for the blur effect.

// this is important for IEs
var polyfilter_scriptpath = 'lib/js/';

<script src="lib/js/cssParser.js"></script>
<script src="lib/js/css-filters-polyfill.js"></script>

3. Build the html for the modal window with a 'fadeIn and Scale' effect.

<div class="md-container md-effect-1" id="modal-1">
  <div class="md-content">
    <h3>Modal Dialog</h3>
      Modal Content Here
      <button class="md-close">Close me!</button>

4. Active the plugin and done.


5. All configuration options with default values.


  // Modal overlay class
  overlaySelector: '.md-overlay',

  // Modal close button class
  closeSelector: '.md-close',

  // Class to be added after open
  classAddAfterOpen: 'md-show',

  data: {
  some_data: ''
  data: false,

  buttons: [
    class: 'btn-ok',
    callback: function ( btn, modal, event ) {
      //You can cancel the modal hide event by returning false
      alert("You need to check your info!");
      return false;
    class: 'btn-cancel',
    callback: function ( btn, modal, event ) {
      //You can access to the mocal data here
      var modal_data = modal.data.some_data;
  buttons: false,

  // callbacks
  beforeOpen: false,
  afterOpen: false,
  beforeClose: false,
  afterClose: false

6. Available animations:

  • Fade In and Scale Up 
  • Slide from the Right
  • Slide from the Bottom
  • Newspaper
  • Fall In
  • Side Fall In 
  • Slide in and Stick to Top
  • 3D Flip Horizontal
  • 3D Flip Veritcal
  • 3D Sign
  • 3D Slit
  • 3D Rotate from Bottom
  • 3D Rotate in from Left
  • Super Scaled
  • Just Me
  • Blur
  • Slide in from Bottom (w/Perspective)
  • Slide from Right (w/Perspective)
  • Slip in from Top (w/Perspective)

Change log:


  • Fixed close modal on click outside


  • Fixed close modal on click outside


  • v1.3.1: Fixed: niftyModals effects stop working well since second try


  • Added bootstrap modal-content missing style to bootstrap adapter

This awesome jQuery plugin is developed by foxythemes. For more Advanced Usages, please check the demo page or visit the official website.