Rationale

The differences

There are different types of dialog windows, generally they are divided into Modal dialogs and Modeless dialogs.

The difference between those is that the former require an input from the user, they cannot be hidden and they don't allow interaction with the webpage until the dialog is closed.

The latter instead allow to interact with the webpage because they don't require action from the user, so they can be ignored too.

The problem

What are the behaviors of the modal dialogs and modeless dialogs in JavaScript? The modal dialogs block the execution of JS until the user closes them, and the modeless dialogs don't exist in pure JS.

Therefore, if you need to show a modal dialog to the user and asynchronously execute other code, you can't by using the default dialogs offered by JavaScript (alert(), prompt() and confirm()), because they block code execution.

The solution

If you use JQuery in you project you may easily find a nice plugin which does this task (also better than this library). However, if you're not planning to use JQuery, it seems meaningless to import such a framework only to integrate a plugin: at this point this library could be your solution if you only need the customizable but lightweight dialogs and nothing else.

I made a library that provides a function named dialog(), which displays an asynchronous modal dialog: modal, because the user is required to take action, asynchronous, because it doesn't block JS execution.

Documentation

You can read a short but effective documentation at the beginning of the dialog.js file.

A more exhaustive documentation is provided in the Documentation pages.

Live demo

You can see the three live examples here.

Compatibility

The software (script and stylesheet) is compatible with all major browsers:

• v2.x was tested with IE8, Chrome, Opera, Firefox and Safari Mobile, with success.
• v3.x should be compatible with the main browsers, however some polyfills (addEventListener and Promise) might be needed for IE.

The stylesheet is W3C valid. A prefixer (like -prefix-free) might be needed in order to add vendor prefixes for browsers which need them.

The software is provided with NO WARRANTY and AS IS. If you find bugs you are welcome to report them on the github project issues.

Changelog

A changelog for the various releases with their release date is provided.

Please refer to the changelog.md file.