This time I will share jQuery Plugin and tutorial about Smooth Modal Popup Plugin with jQuery and CSS3 – needPopup, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="dist/needpopup.min.css"> |
2. Place your content into an element with your modal ID.
1 |
<div id="popup-demo" class="needpopup"> |
3. Add a trigger link that uses data-needpopup-show attribute to point to the target modal ID.
1 |
<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.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="dist/needpopup.min.js"></script> |
5. Config the modal popup.
1 |
needPopup.config.custom = { |
6. All the default config options.
02 |
'removerPlace': 'inside', |
05 |
'closeOnOutside': true, |
08 |
onShow: function() {}, |
11 |
onBeforeShow: 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.
