Simple Popup

Display a simple popup without any contents.

wpmUi.popup().show()

Customize Default Popup

Define contents of the popup

var p = wpmUi.popup()
	.title('Hello World')
	.content('This is <b>HTML</b> content')
	.show();

Example 2: Display a custom close button inside the popup contents

var p = wpmUi.popup()
	.title('Hello World', false) // Second param: Show default close button?
	.content('This is <b>HTML</b> content. <a class="close">Close!</a>')
	.show();

Example 3: Define a custom size for the popup

var p = wpmUi.popup()
	.title('Hello World')
	.content('This is <b>HTML</b> content')
	.size(300, 400) // width, height
	.show();

Example 4: Set the popup-size to 'auto'

var p = wpmUi.popup()
	.title('Hello World')
	.content('<center>This is <b>HTML</b> content<br>Line 2<br>Line3</center>')
	.size(0, 0) // 0 is eqal to 'auto'; you can use either
	.show();

Make it a modal Popup

A modal popup displays a dark layer in the background by using the .modal() function

var p = wpmUi.popup()
	.title('Hello World')
	.content('This is <b>HTML</b> content')
	.modal(true, false) // Params: (1) modal background? (2) Hide when clicked on background?
	.show();

Animate the Popup

Popups can be animated when they are opened or hidden. Simply use the .animate() function
Note: This will only work when the animation CSS file are loaded via lib3()->ui->add(TheLib_Ui::MODULE_ANIMATION);

var p = wpmUi.popup()
	.title('Hello World')
	.content('This is <b>HTML</b> content')
	.modal(true, false)
	.animate('wobble', 'zoomOut')
	.show();

Confirmation box

A special layout is built into the popup class, that makes it simple to get a confirmation/choice from the user.
The .confirm() function displays a modal confirmation box inside the popup.

var p = wpmUi.popup()
	.title('Hello World')
	.content('This is <b>HTML</b> content')
	.modal(true, false)
	.animate('wobble', 'zoomOut')
	.show();
// ...
p.confirm({
	'message': 'Are you sure?',
	'buttons': ['Yes', 'No'],
	'callback': function(button) { p.hide(); alert('Pressed button ' + button); }
})

Custom Popup layouts

Above demos all use the built-in default layout, but all Popups can have a complete customized layout. Simply specify your custom HTML and CSS code in the constructor.

var template = '<div class="popup"><div class="wrapper"><div class="popup-content"></div><a class="close">Close</a></div><div class="popup-title"></div></div>';
var css = '.popup{ border: 3px solid red; }';

var p = wpmUi.popup( template, css )
	.title('This is the title!')
	.content('This is <b>HTML</b> content')
	.modal(true, false)
	.animate('wobble', 'zoomOut')
	.show();

Position the Popup

The default position of a popup is in the center of the screen, but this can be changed with the .snap() function.

var p = wpmUi.popup()
	.title('Hello World')
	.content('This is <b>HTML</b> content')
	.modal(true, false)
	.animate('slideInDown', 'zoomOut')
	.snap('top', 'left') // Options: none, top, left, right, bottom
	.show();

Example: top, left, right

Example: top, left, right, bottom

Move Popup instead of hiding it

Default behavior is, to close the popup when it is closed.
By using the .slidein() function you can specify that the popup should stay visible and behave like a slide-in layer.

var p = wpmUi.popup()
	.title('Hello World')
	.content('This is <b>HTML</b> content')
	.modal(true, false)
	.slidein('up') // Options: none, up, down
	.show();

This second demo uses .snap() to position the popup in the lower right corner, like a common slide-in

Slide-In: bottom/left DOWN

Slide-In: top/right DOWN

Slide-In: bottom UP

Slide-In: left DOWN

Slide-In: full-page DOWN

Custom Slide-in layouts

This example combines the custom layout with positioning and slidein features.

var template = '<div class="popup"><div class="wrapper"><div class="popup-content"></div><a class="close">Close</a></div><div class="popup-title"></div></div>';
var css = '.popup{ box-shadow: 0 0 0 1px #6CE; padding: 5px } ' +
	'.popup-title { padding: 10px; margin: 0 auto; position: absolute; bottom: 0; left: 0; right: 0; text-align: center } ' +
	'.popup.slidein-collapsed {border: 0; background: transparent; box-shadow: none } ' +
	'.popup.slidein-collapsed .popup-title { width: 100px; background: #FFF; box-shadow: 0 1px 3px rgba(0,0,0,0.3) }';

var p = wpmUi.popup( template, css )
	.title('This is the title!')
	.content('This is <b>HTML</b> content - <a class="destroy">Destry popup</a>')
	.size(300, 400)
	.modal(true, true)
	.snap('top')
	.slidein('down')
	.show();