# Wijmo 5 Popups

Show dialogs, forms, or arbitrary elements as popups associated with a parent element.

Wijmo 5 introduces a Popup control that can be used to display arbitrary content as dialogs (centered on the screen, without an owner element), or as popups (located relative to an owner element).

### Dialogs (Popups with no owner)

Dialogs are Popups with no owner element. They must be shown by calling the show method.

Dialogs can be modal or modeless. Modal dialogs have a dark backdrop, and if their hideTrigger property is set to None, they cannot lose focus and must be dismissed by the user, either by pressing escape or by clicking an element on the dialog itself.

Notice the following features provided by the Popup control:

- Element positioning: The popups are centered on the screen or positioned above or below the owner element, with edge-detection.
- Focus handling: Input elements get the focus when the dialog is displayed, with support for the 'autofocus' attribute. Modal popups keep the focus within the control when the user presses the Tab key.
- Keyboard handling: Popups are hidden when the user presses the Escape key, or when they press the Enter key and the popup contains no elements in an invalid state.

### Custom CSS transitions

The Popup class has two properties called fadeIn and fadeOut that add simple animations when the Popup is shown or hidden. Both are set to true by default.

You can create your own custom CSS-based animations by adding and removing classes to the Popup's host element in response to the showing and hiding events, and defining CSS rules that apply animations based on those classes.

For example, these rules specify a hidden state for elements with the custom-animation class, and a visible state for elements with the custom-animation-visible class:

    /* CSS animations for fading in and out */
    .custom-animation {
        opacity: 0;
        transform: rotate3d(1, .5, .5, 180deg) scale(0.5);
        transition: all ease-out 0.4s;
    }
    .custom-animation-visible {
        opacity: 1;
        transform: none;
        transition: all ease-in 0.3s;
    }

Note that:

- The custom styles are applied only to the Popup element, not to the modal backdrop.
- When hiding the Popup, you have a 400ms interval before the Popup is removed from the DOM, so any CSS display transitions should have the same duration.

Click the button below to see the effect of applying these classes to a Popup:

### Popups and Promises

You can easily wrap a Popup in a JavaScript Promise, show the dialog and resolve or reject the promise based on the dialogResult.

For example, here is a function that creates a JavaScript Promise. To use the Promise, you would call its 'then' method and pass callbacks for the 'resolve' and 'reject' results. In this case, 'resolve' is called when the user submits the dialog, and 'reject' when the dialog is closed by pressing the Escape key or the close button on the dialog's header.

    // create Popup Promise
     getPopupPromise() {
        var p = new Promise((resolve, reject)=>  {
            var popup = this.frmLogIn;
            popup.show(true);
            popup.hidden.addHandler(()=> {
                popup.hidden.removeAllHandlers();
                if (popup.dialogResult == 'submit') {
                    resolve(popup);
                } else {
                    reject(popup);
                }
            });
        });
        return p;
    }

Click this button to see how this works:

Unfortunately, we can't show you this here because the browser you are using does not support promises (Chrome, Edge, and FireFox do; IE doesn't...)

### Popovers (Popups with owner elements)

Popups may have owner elements that can be used to control their visibility. The showTrigger and hideTrigger properties determine whether the Popups should be shown or hidden when the owner element is clicked or when the popup loses the focus.