Popelt

Lightweight Modal Popup jQuery Plugin


Github: Github
Download: Minified(5kb)   Source


Hello World

Simple popup with a Title and a Description.
It can be closed by pressing Escape key or clicking the black background.
var p = new Popelt({
    title: 'Hello World!',
    content: 'Lorem ipsum dolar sit amet.',
}).show();

Adding buttons

Popup with 2 buttons
var p = new Popelt({
    title: 'Are you sure you want to do this?',
    content: ''
});
p.addButton('Yes, proceed', function(){
    alert('You clicked YES');
});
p.show();

OffsetTop and Width

Giving specific offset from top and width to the popup
var p = new Popelt({title: 'Testing offset and width',
    content: 'Lorem ipsum dolar sit amet.',
    offsetTop: 40,
    width: 300
}).show();

CloseClass and closeBtnTooltip

Giving specific offset from top and width to the popup
var p = new Popelt({title: 'A close test',
    content: "Hover on the close (×) button for tooltip" + 
            "Now click on the below 'Dismiss' link" +
            "<a href='#' class='btn-close'>Dismiss</a>" +
            "This is all within the content",
    closeClass: 'btn-close',
    closeBtnTooltip: 'Click here for magic'
}).show();

Overlay background

Changing overlay color and opacity
var p = new Popelt({
    title: 'Overlay',
    content: "Some content",
    overlayColor: '#f00',
    overlayOpacity: 0.5
}).show();

Fadespeed

Changes the fading animation speed while closing
var p = new Popelt({
    title: 'Overlay',
    content: "Some content",
    fadeSpeed: 2000
}).show();

AJAX Content

Retrieving AJAX content.
Also, the focus attribute focuses on the first input element inside content.
var p = new Popelt({
    contentType: 'ajax',
    loadUrl: 'ajax.html',
    focus: true
});
p.addCloseButton();
p.show();

IFrame Content

Retrieving Iframe content.
var p = new Popelt({
    contentType: 'iframe',
    loadUrl: "//www.youtube.com/embed/tRVC4BKWaP8",
    iframeWidth: '100%',
    iframeHeight: '300px'
});
p.addCloseButton();
p.show();

Content from template

Displaying content from DOM page using the element ID

Sample content div#test_id_content:
This is some dummy sexy content that I want to show in the popup.
Oh yeah ;)
var p = new Popelt({
    contentType: '#test_id_content'
}).show();

MaxHeight

Applying max height to popup content

var p = new Popelt({
    title: 'This is title',
    contentType: 'ajax',
    loadUrl: 'ajax.html',
    maxHeight: 400
})
p.addCloseButton();
p.show();

Responsive

Making the popup responsive

var p = new Popelt({
    title: 'This is title',
    content: "Some content,
    responsive: true
})
p.addCloseButton();
p.show();