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.

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

<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>
    <div>
      Modal Content Here
      <button class="md-close">Close me!</button>
    </div>
  </div>
</div>

4. Active the plugin and done.

$("#modal-1").niftyModal();

5. All configuration options with default values.

$("#modal-1").niftyModal({

  // 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:

2017-01-14

• Fixed close modal on click outside

2016-12-05

• Fixed close modal on click outside

2016-11-22

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

2016-11-01

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