Responsive Modal Dialog Plugin with jQuery - Popelt

Popelt is a highly configurable jQuery popup plugin to create responsive modal windows & dialog boxes that support both dynamic and static html content like text, ajax content, iframes, template, etc.

Basic usage:

1. Include the jQuery popelt plugin and other required resources in your Html file.

<link rel="stylesheet" href="css/popelt.css">

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="source/popelt-v1.0-source.js"></script>

2. Create a default modal window with custom title/message. It can be closed by pressing ESC key or clicking on the black background.

var p = new Popelt({
    title: 'Title',
    content: 'Description',
}).show();

3. Create a confirm dialog with custom buttons.

var p = new Popelt({
    title: 'Are you sure?',
    content: ''
});
p.addButton('Yes', function(){
    alert('You clicked YES');
});
p.show();

4. Load content from an external source via AJAX.

var p = new Popelt({
    contentType: 'ajax',
    loadUrl: 'ajax.html',
    focus: true
});
p.addCloseButton();
p.show();

5. Load content from custom template.

var p = new Popelt({
    contentType: '#target-dom'
}).show();

6. Default plugin settings.

// enable modal mode
modal     : false,

// custom modal/dialog title
title     : false,

// custom modal/dialog content
content   : '',

// top offset
offsetTop   : -1,

// display a close button
closeButton : true 

// tooltip text for the close button
closeBtnTooltip : 'Close',

// width of the modal/dialog
// pixel or percentage
width     : 600,

// CSS class for close link
closeClass  : '',

// ESC key to close
escClose    : true,

// Element to focus
focus     : null,

// iframe, ajax, #elementId
contentType : false ,

// iframe/ajax URL
loadUrl   : false,

// an array of buttons
// [{ label [,classname] [,clickEvent]}]
buttons   : [],

// fade animation speed
fadeSpeed   : 200,

// iframe height/width
iframeHeight  : '300px',
iframeWidth : '100%',

// max height of the modal/dialog
maxHeight   : false,

// vertical alignment
valign    : true,

// enable responsive layout
responsive  : false,

// overlay background color
overlayColor  : false,

// overlay opacity
overlayOpacity: false

7. Public methods.

var p = new Popelt({
    // OPTIONS HERE
})

// add custom buttons.
// addButton(label [,class] [,clickEvent]);
p.addButton();

// add close button
p.addCloseButton();

// Add a button with "OK" as label.
p.addOKButton(clickEvent)

// Add a button with "Cancel" as label.
p.addCancelButton(clickEvent)

// Can be HTML or Plain text
p.setContent(CONTENT);

// Show the popup
p.show();

// Close the popup
p.close();

---

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