EZ Dialog information

This page shows additional information for interacting with dialog boxes

async/await pattern

Due to how the dialog element works, all functions run asynchronously and will by default not block. You must await them if you plan on evaluating the result of the dialog, or want the dialog to block code that follows the dialog call until it's closed.

Stacking dialogs

You can open multiple dialogs at once and they will stack on top of each other.

No buttons

Opening a dialog that has no buttons to close it will automatically register a click handler regardless on whether you used the "closeOnBackdrop" argument or not. The handler will close the dialog when you click outside of it. alert, confirm, and prompt behave as if you've cancelled them (for alert there's no difference between close and cancel).
Custom dialogs will return an empty string when closed this way. This allows you to distinguish between clicking outside and pressing the ESC key for example.

Form focus

When a dialog is shown, focus is put on the first enabled form element inside it. If you do not add custom form elements, focus will be put on the first button.

Confirming dialogs

Users can confirm the dialog using the ENTER key. This pretends that the first button was pressed.

Cancelling dialogs

Users can cancel dialogs using the ESC key and potentially by other browser internal means. EZ Dialog behaves as if the cancel button was pressed in that case, or the OK button for the alert window.

In custom() dialog boxes you can define which button is acting as the cancel button by use of the "isCancel" property. If no button has this property set to true, the dialog promise will reject when the modal closes. If multiple buttons have the property enabled, the first one will be taken.

Interacting with open dialogs

EZ Dialog does not stop you from interacting with open dialog boxes by any means. You are free to add custom events to HTML elements you add via the custom() dialog. Be aware that if you manually close the dialog using the internal .close() function the result will be empty unless you provide the result string as argument to the function call.

< < Go back