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

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.