Smooth Modal Popup Plugin with jQuery and CSS3 - needPopup
File Size: | 16.3 KB |
---|---|
Views Total: | 4188 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
needPopup is a lightweight and cross-browser jQuery plugin which allows to display a responsive, nice clean modal popup with CSS3 powered animations on your web application.
How to use it:
1. Include the required jQuery needPopup plugin's stylesheet in the document's head section.
<link rel="stylesheet" href="dist/needpopup.min.css">
2. Place your content into an element with your modal ID.
<div id="popup-demo" class="needpopup"> Modal content goes here </div>
3. Add a trigger link that uses data-needpopup-show
attribute to point to the target modal ID.
<a href="#" data-needpopup-show="#popup-demo">Show popup</a>
4. Include the jQuery needPopup plugin's script after jQuery library, but before the closing body tag.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="dist/needpopup.min.js"></script>
5. Config the modal popup.
needPopup.config.custom = { // config options here };
6. All the default config options.
// 'outside' to place in wrapper and 'inside' to place in popup 'removerPlace': 'inside', // close on click outside popup 'closeOnOutside': true, // on show callback onShow: function() {}, // on before show callback onBeforeShow: function() {}, // on hide callback onHide: function() {}
Change logs:
2015-10-02
- fix reset options in modal queue
2015-10-01
- fix critical bug with unaccessible links inside popup
2015-06-26
- added onBeforeShow callback - changed options replacement to extend
This awesome jQuery plugin is developed by DzmVasileusky. For more Advanced Usages, please check the demo page or visit the official website.