Building Modal Dialogs into Your Web Application
- Interrupting the User
- Building the Dialog Box
- Capturing the Mouse Interactions
- Capturing Keyboard Events
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Interrupting the User
Usability experts agree that interaction with web sites should be primarily user-driven, but sometimes we need to interrupt whatever the user is doing and force her to make a decision. For example, if the user has just filled in a long form and tries to leave the page with the Back button, it’s sensible to ask whether that’s really her intention. Likewise, if a sensitive financial transaction has just been triggered, it makes sense to prevent the user from activating other links, modifying the input fields, or resubmitting the transaction.
Supported by the mechanisms inherent in most operating systems, desktop applications can use a variety of methods—everything from simple questions to complex modal dialog boxes—to interrupt the user’s workflow. Web browsers offer no such functionality, however, which is probably a good idea in the world of pop-up windows and intrusive marketing techniques. The only modal dialog boxes available in all browsers are the ones generated with JavaScript alert and confirm statements (and even these don’t always work in Internet Explorer 7), the first having a single OK button and the other offering yes/no options.
Although you can find a large number of JavaScript modal dialog box implementations on the Internet, their designers usually forget that most browsers use at least two input devices: a mouse and a keyboard. A typical modal dialog box implementation blocks mouse interactions with the parent window, but still allows a keyboard-focused user to interact inadvertently with forms controls, buttons, and links in the parent window (highly undesirable if the modal dialog is used to ensure that a back-end transaction is executed without interruption).
Using the keyboard events described in my article "Adding Keyboard Shortcuts to a Web User Interface," in this article I’ll show you how to build a truly modal dialog box that will capture all user interactions with the parent window. Due to the browser’s event model, we can’t implement an API equivalent to the typical modal dialog box API (or the alert/confirm JavaScript functions). The function that displays the modal dialog box has to return to the caller before the user supplies the necessary information, and the user-selected information can only be passed to a callback function. Thus, our API will have the functions shown in the following table.
Function |
Parameters |
messageBox(prompt, caption, flags, callback) |
prompt: Text to be displayed in the body of the dialog box. The prompt can contain HTML markup (for example, the <b> tag). caption: Text to be displayed in the title bar of the dialog box. flags: Specifies the buttons that will be displayed in the dialog box, as well as the icon displayed left of the prompt text. callback: JavaScript function to be called when the user clicks one of the buttons of the dialog box. |
cancelMessageBox() |
Removes the modal dialog box. Callback function is not called. |