Using modal dialogs for messages

The dialog widget has a modal option reserved for when we need to focus the user's attention on just one thing. This option displays the dialog while preventing the user from interacting with the rest of the user interface. They have no choice but to take notice. This goes without saying, the modal dialog should be used sparingly, especially if you want to use it to broadcast messages to the user.

Let's look at how we can strip down the dialog in order to construct a generic notification tool in our application. It is a modal dialog in essence that is used for those cases where we cannot let the user continue what they're doing without ensuring they've seen our message.

Getting ready...

Here is what the HTML we'll need for this example looks like. Notice that the #notify div, which will become a dialog widget, has no content as our new notify widget will supply some.

<div id="notify"></div>

<button id="show-info">Show Info</button>
...