Feature-rich Popup Plugin In jQuery - popModal

A multi-functional, AJAX-enabled, highly customizable popup plugin to create popovers, hints, tooltips, notification popups, dropdown menus, modal windows, alert/confirm dialog boxes on the page.

See It In Action:

How to use it:

1. Download the latest release and include the following JavaScript and CSS files in your page.

<link href="/path/to/popModal.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/popModal.js"></script>

2. Create static or AJAX popovers and dropdown menus using the popModal() method.

<div id="content">
  <p>Content Here</p>
  <div class="popModal_footer">
    <button type="button" data-popmodal-but="ok">ok</button>
    <button type="button" data-popmodal-but="cancel">cancel</button>
  </div>
</div>

// static
$('#trigger').popModal({
  html : $('#content')
});

// ajax
$('#trigger').popModal({
  html : {
    url: 'ajax.html', 
    method : 'POST', 
    data : {}, 
    dataType : 'html', 
    loadingText : 'Please, wait...', 
    errorText: 'An error has occurred'
  }
});

// dropdown menu
$('#trigger').popModal({
  html : $('#content'),
  placement : 'bottomLeft'
  asMenu : true
});

// full options with default values
$('#trigger').popModal({
  html: '',
  placement: 'bottomLeft', // 'bottomCenter', 'bottomRight', 'leftTop', 'leftCenter', 'rightTop', 'rightCenter'
  showCloseBut: true,
  onDocumentClickClose : true,
  onDocumentClickClosePrevent : '',
  overflowContent : false,
  inline : true,
  asMenu : false,
  size : '',
  onOkBut: function() {return true;},
  onCancelBut: function() {},
  onLoad: function() {},
  onClose: function() {}
});

<!-- OR VIA HTML DATA ATTRIBUTES -->
<button id="trigger" 
        data-popmodal-bind="#content" 
        data-placement="bottomLeft" 
        data-showclose-but="true" 
        data-overflowcontent="true" 
        data-ondocumentclick-close="true" 
        data-ondocumentclick-close-prevent="" 
        data-inline="true" 
        data-asmenu="false" 
        data-size="{'width':'500'}">
        Click Me
</button>

3. Create alert dialogs and notification popups using the alertModal() method.

$('#content').notifyModal({
  duration: -1,
  placement: 'center', // 'leftTop', 'centerTop', 'rightTop', 'leftBottom', 'centerBottom', 'rightBottom', 'centerTopSlide', 'centerBottomSlide', 'leftTopSlide', 'leftBottomSlide', 'rightTopSlide', 'rightBottomSlide'
  type: 'notify', // 'alert', 'simple', 'dark'
  overlay : true,
  icon: false,
  onLoad: function() {},
  onClose: function() {}
});

<!-- OR VIA HTML DATA ATTRIBUTES -->
<button id="trigger" 
        data-notifymodal-bind="#content" 
        data-duration="2500" 
        data-placement="center" 
        data-type="notify" 
        data-overlay="true" 
        data-icon="false">
        Click Me
</button>

4. Create dialog boxes using the dialogModal() method.

$('.dialogContent').dialogModal({
  topOffset: 0,
  top: 0,
  onDocumentClickClose : false,
  onOkBut: function() {return true;},
  onCancelBut: function() {},
  onLoad: function() {},
  onClose: function() {},
  onChange: function() {}
});

<!-- OR VIA HTML DATA ATTRIBUTES -->
<button data-dialogmodal-bind="#dialogContent" 
        data-topoffset="0" 
        data-top="10%" 
        data-ondocumentclick-close="false">
        Click Me
</button>

5. Create confirm dialog boxes using the confirmModal() method

$('#confirmContent').confirmModal({
  topOffset: 0,
  top: 0,
  onOkBut: function() {return true;},
  onCancelBut: function() {},
  onLoad: function() {},
  onClose: function() {}
});

<!-- OR VIA HTML DATA ATTRIBUTES -->
<button data-confirmmodal-bind="#confirmContent" 
        data-topoffset="0" 
        data-top="10%">
        Confirm
</button>

6. Create hints and tooltips triggered by hover event.

<button id="tooltip" class="titleModal" title="Tooltip Content Here">Hover Me</button>

<button id="hint" class="hintModal">Hover Me
  <div class="hintModal_container">
    Hints Here
  </div>
</button>

7. Event handlers.

$(el).on('load', function() {});
$(el).on('close', function() {});
$(el).on('okbut', function() {});
$(el).on('close', function() {});

---

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