HTML custom component
pop-up
Description
A pop up is initially hidden and is shown on demand. How the popup appears can be controlled with the origin attribute.
HTML structure
[%<pop-up id="some-popup" origin="top">
</pop-up>%]
Comments
Showing the component needs an opener (an icon or button) which sets the shown attribute.
[%var icon = document.getElementById("some-icon");
icon.addEventListener("click", function() {
document.getElementById("some-popup").shown = 1;
});
%]
Any click or touch outside the popup hides the popup, just like pressing the escape key.
The pop up dispatches a hide event upon hiding.
[%document.querySelector("#some-popup").addEventListener("hide", function() {
// Something that needs to happen every time this popup is hidden.
});%]
|
Attributes
| Coding name |
origin
|
| Value space |
* %center%: the popup appears in the center of the window (default)
* %top%: the popup slides in from the top
* %left%: the popup slides in from the left
* %bottom%: the popup slides in from the bottom
* %right%: the popup slides in from the right
* %element%: pass an element or selector to show
|
| Default value |
By default the pop up appears in the center.
|
| Mandatory |
0
|
|
We are sorry
This page cannot be displayed in your browser. Use Firefox, Opera, Safari, or Chrome instead.