Wijmo 5 Popups
Show dialogs, forms, or arbitrary elements as popups associated with a parent element.
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 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:
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:
Click the button below to see the effect of applying these classes to a Popup:
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
function getPopupPromise() {
var p = new Promise(function (resolve, reject) {
var popup = $scope.dialogs.login;
popup.show(true);
popup.hidden.addHandler(function () {
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...)
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.