Check: Demo
Github
Download: Minified(5kb) Source
var MyPopup = new popelt({ title: 'Pop some cash', content: ''Hey wasup! This is my content.' }).show();
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 |
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) |
Check: Demo
Github
Download: Minified(5kb) Source