Smooth Modal Popup Plugin with jQuery and CSS3 - needPopup

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.