A modal is a UI component that pops up when specified, covering its parent element until it is dismissed.
Default modal, initializing as visible and dismissable by clicking outside the modal:
<x-modal>
Place content markup here
</x-modal>
Modal that darkens the parent element that it is covering when visible:
<x-modal overlay>
Place content markup here
</x-modal>
Modal that initializes as hidden:
<x-modal hidden>
Place content markup here
</x-modal>
Modal that allows pressing the ESC key to dismiss itself:
<x-modal hide-triggers="esc">
Place content markup here
</x-modal>
Modal that is dismissed when the user clicks on the overlay that surrounds the modal:
<x-modal hide-triggers="tap">
Place content markup here
</x-modal>
Dismisses the modal popup.
Dismisses the modal popup.
Alternates the visibility status of the modal popups.
When a x-modal element receives the reveal event, it will show the modal.