Popelt

Lightweight Modal Popup jQuery Plugin


Check: Demo   Github
Download: Minified(5kb)   Source


Features

Example

var MyPopup = new popelt({
    title: 'Pop some cash',
    content: ''Hey wasup! This is my content.'
}).show();

Methods

Method name Parameters Description
addButton label [,class] [,clickEvent] label - Name on button
class - custom class to give to the button [optional]
clickEvent - Function to execute on click of button. If not provided, by default triggers popup close [optional]
setContent content content - Body content of the popup
Can be HTML or Plain text
show
showPopup
- Show the popup
close
closePopup
- Close the popup
addOKButton clickEvent Add a button with "OK" as label
clickEvent - On click event
addCloseButton - Add a button with "Close" as label. It will close the popup
addCancelButton - Add a button with "Cancel" as label. It will close the popup

Settings / Attributes

Setting Values Default Description
modal boolean false true or false
title text Not displayed if empty
content string / html Popup body content.
HTML or Text string.
Not displayed if empty
width number 600 Width of the popup.
Accepts percent (%) or pixels (px)
maxHeight number Give max height to the content container for longer content.
A scrollbar will appear if content overflows.
offsetTop number vertically centered If the popup needs to appear some pixels away from the top instead of being vertically centered.
responsive boolean false true or false
Width of the popup will be maximum 100%;
closeButton boolean true Display the "×" close button on top right.
closeBtnTooltip text "Close" Tooltip for the default "×" clsoe button on top right.
Give false if to hide.
overlayColor CSS Color black Change color of the overlay background.
Accepts CSS color names or hex color codes.
overlayOpacity 0.0 - 1.0 0.9 Transparency of overlay background. Accepts CSS 'opacity' values.
focus boolean false If want to focus on the first 'input' or 'textarea' when the popup is opened.
escClose boolean true Allow popup to close by pressing "Escape" or "Esc" key.
closeClass string "pop-close" If want any link <a> or button or any element inside your content to trigger popup close, give it this classname.
fadeSpeed number 200 Speed of fade animation while closing popup. Accepts jquery speed value for fadeOut.
buttons Array object Syntax:
[{ label [,classname] [,clickEvent]}]
Example:
[
  { label: 'Save changes', 
    classname: 'primary', 
    clickEvent: function(){alert('Saving changes');}
  },
  { label: 'Close'}
]
contentType "ajax" or "iframe" or #elementID You can add dynamic content via AJAX, or embed a video or a webpage using iframe,
or take the content from an existing element in the DOM using '#' (for element ID).
loadUrl string Applied for contentType AJAX and Iframe.
Source URL to load via AJAX or iframe.

Note: Currently do not support cross-domain URL for AJAX
iframeHeight number 300px Set height for Iframe content.
Accepts percent (%) or pixels (px)
Dynamic height coming soon.
iframeWidth number 100% Set width for the Iframe content.
Accepts percent (%) or pixels (px)

Coming soon

Check: Demo   Github
Download: Minified(5kb)   Source