EZ Dialog exposes a single function ezDlg(closeOnBackdrop).
This function returns an object that can be used to open the four provided dialog types.
Description:
Instantiates a dialog object to create dialog windows.
You can either call the function every time you want to show a dialog,
or you can call it once and reuse the result object multiple times.
The actual dialog box element is only created when a box has to be shown.
The element is also removed again automatically after the box has been closed.
Multiple dialog boxes can be shown at once. They will stack on top of each other.
Arguments:
The optional "closeOnBackdrop" boolean argument can be used
to always attach the mouse click handler.
Normally, a handler is only attached when no buttons are in a custom dialog.
Closing a dialog by clicking outside has the same effect as cancelling it.
Returns:
Returns a dialog object with four functions:
alert, confirm, prompt, custom
Description:
Replacement for window.alert(body).
A simple dialog box with a title, body text, and a single button to close it.
The returned value is undefined at this point and should not be evaluated.
Arguments:
Description:
Replacement for window.confirm(body).
A dialog box with a title, body text, and two buttons to close it.
The function returns a boolean indicating whether the OK button was pressed or not.
Closing the dialog with the escape key simulates a cancel button press.
Arguments:
Description:
Replacement for window.prompt(body, prefill).
A dialog box with a title, body text, a textbox, and two buttons to close it.
The function returns the string from the text box when closed with the OK button,
or null if closed otherwise.
Arguments:
Description:
Shows a customizable dialog.
The returned value is the value of the button that has been clicked.
Arguments:
Dialog boxes accept strings, nodes and node lists for body contents.
You can mix nodes and strings in an array to supply multiple values.
Note however that arrays aren't processed recursively.
This means node lists in arrays are not expanded into nodes.
To do this yourself, you can use Array.from(NodeList) to convert it
into an array of nodes.
You can then append or prepend additional elements or strings to it.
Example:
[document.createElement("div"),"test"]
This adds the div followed by a paragraph with the string "test" inside.
This type is used in the custom dialog to specify the button configuration. You can supply an array of as many buttons as you want. Supply an empty array to create a dialog without buttons. Supplying null or undefined uses a single "OK" button.
Format: {value: string, text: string, isCancel: bool}
Note: Only the first button with isCancel=true will act as cancel button.
When a custom dialog is shown, each button object will be populated with a "buttonElement" property. This property holds the button HTML element reference. You're free to interact with it, for example to add custom events to a button. The demo has a custom dialog where a button is dynamically enabled or disabled.