Responsive Modal Dialog Plugin with jQuery - Popelt
File Size: | 18.6 KB |
---|---|
Views Total: | 2253 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.