js.Dialog

Dialog.alert()

The Dialog.alert-function is a shortcut to an often-used variation of the Dialog.simple dialog, and is intended as a replacement for JavaScript’s buit-in alert() function.

For this reason, you can simply call this dialog to display a message. For example like this:

Dialog.alert('Hello World!');

Click to run example

However, there is one important difference to JavaScript’s own function: since it actually just inserts HTML elements into the document, it runs asynchronously, i.e. the program flow is not halted. I consider this a feature, not a bug.

Often, however, you have some code which should only be run after the user dismissed the alert. In such a case, you would have to resort to callback functions. Like here:

Dialog.alert('Hello World', {
	   onConfirm: function(dlg) {
	      alert('second');
	   }
});
alert('first');

Click to run example

Please note that the "first" dialog appears immediately after the dialog is initialized (even before the overlay animation), while the "second" dialog appears after the dialog is dismissed.

Since the Dialog.alert()-dialog only has the one default button, you always get the onConfirm callback called if a button is activated. However, the dialog closebox (the little × in the title bar) is mapped to the onCancel callback only.

One thing to know is that both these callback functions may also return a boolean value. If you return true (or in fact not return anything at all), everything works as normal, but if you return false, the dialog will not be closed but stays open.

For example, to effectively disactivate the closebox, you can simply do it like this:

Dialog.alert('Hello World', {
	   onConfirm: function(dlg) {
	      alert('OK');
	   },
	   onCancel: function(dlg) {
	      return false;
	   }
});

Click to run example

You can of course give any valid parameter to Dialog.alert, even those that would render more buttons, or a text entry field. However, there is no built-in support for multiple buttons or text fields, so it is usually easier to use one of the other standard dialogs (see Dialog.confirm or Dialog.prompt) if you need these items.