### Simple Popup

Display a simple popup without any contents.

    wpmUi.popup().show()

Simple Popup

### Customize Default 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

### 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();

Make it modal

### 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();

Animate it

### 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); }
    })

Get confirmation

### 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();

Custom Layout

### 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();

Test positioning

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();

Slide-In demo

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

Slide-In: bottom/right UP

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();

Custom Layout