jQuery Multi-Purpose Popup Modal Plugin - popModal

popModal is a powerful and versatile jQuery modal plugin which allows you to create popup windows for multiple purposes like hint modal, notify modal, dialog modal and much more.

How to use it:

1. Load the required jQuery popModal's stylesheet in the head section of the document.

<link type="text/css" rel="stylesheet" href="popModal.css">

2. Load the jQuery library and jQuery popModal's javascript at the end of the document so the pages load faster.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="popModal.js"></script>

3. Create the content for the modal window.

<div id="content" style="display:none">

Your content goes here

<div class="popModal_footer">
<button type="button" data-popModalBut="ok">ok</button>
<button type="button" data-popModalBut="cancel">cancel</button>
</div>
</div>

4. Create a button to open a modal window.

<button id="demo">Click me</button>

5. Call the plugin.

<script>
$(function(){
$('#demo').popModal({
html : $('#content').html()
});	
});
</script>

6. Default parameters. Check out the demo page for more usages & examples.

$('#demo').popModal({
  // Static html, dinamic html, string, function (object, string, function). 
  // Use function if you want load content via ajax.
  html: '',

  // Popup position (string).
  // 'bottomCenter', 'bottomRight', 'leftTop', 'leftCenter', 'rightTop', 'rightCenter'
  placement: bl,

  // show/hide close button on popup (boolean).
  showCloseBut: true,

  // close popup when click on any place (boolean).
  onDocumentClickClose : true,

  // prevent close popup when click on specified elements (string).
  onDocumentClickClosePrevent : '',

  // overflow content (boolean).
  overflowContent : false,

  // create popup relative element (boolean).
  inline : true,

  // use popup for show as dropdown menu
  asMenu : false,

  // size of popup
  size : '',

  // show text, before loading content (string).
  beforeLoadingContent : 'Please, waiting...',

  // code execution by clicking on OK button, contained in popup (function).
  onOkBut: function() {return true;},

  // code execution by clicking on Cancel button, contained in popup (function).
  onCancelBut: function() {},

  // code execution before popup shows (function).
  onLoad: function() {},

  // code execution after popup closed (function).
  onClose: function() {}
}); 

7. Hide the popup manually.

$('#demo').popModal("hide");

8. Events.

var myPopup = $('#demo').popModal();

myPopup.on('load', function() {});

myPopup.on('close', function() {});

myPopup.on('okbut', function() {});

myPopup.on('cancelbut', function() {});

Change logs:

2018-01-16

• fixed for ie11

2017-10-27

• JS & CSS update

2017-08-15

• JS & CSS update

2016-10-05

• JS & CSS update

2016-04-11

• update 

---

This awesome jQuery plugin is developed by vadimsva. For more Advanced Usages, please check the demo page or visit the official website.