Simple Popup
Display a simple popup without any contents.
wpmUi.popup().show()Simple Popup
Display a simple popup without any contents.
wpmUi.popup().show()Simple Popup
Define contents of the popup
var p = wpmUi.popup()
.title('Hello World')
.content('This is <b>HTML</b> content')
.show();
Demo contents
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();
Custom close button
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();
Custom popup size
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();
Auto popup size
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();
Make it modal
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();
Animate it
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); }
})
Get confirmation
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();
Custom Layout
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();
Test positioning
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();
Slide-In demo
This second demo uses .snap() to position the popup in the lower right corner, like a common slide-in
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();
Custom Layout