Modal Window Examples

Basic Modal

Modal Title

This is the modal content.

Click the X, press Escape, or click outside to close.


Unclosable Modal

Unclosable Modal

This modal cannot be closed with the X button, Escape key, or clicking outside.

You must use JavaScript to close it.


No Backdrop Click


<modal-window noclick>Example</modal-window>

    

This dialog will not close if you click outside of the dialog element, but will close by any other standard method.

No Backdrop Click Modal

Clicking the backdrop will not close this modal.

You can still close it with the X button or the Escape key.


Modal With Style

This is an example of more realistic style in a modal window. There is no "slot" API here. Things like a close button are part of the modal's children, and you would need to handle events in your application code.

This example uses the attribute no-icon, which renders a dialog window with no close "x" icon, but the dialog will still respond to the escape key or clicks off of the modal to close.