Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Summary
In this article, I’ve described how you can create a completely modal dialog box in a browser window by using an overlay DIV element (which blocks mouse interaction with the underlying web page) and a keyboard event handler that captures the user’s attempts to move the focus to the input controls or links on the underlying page.
Although the dialog box created with the JavaScript code described in this article appears completely modal to the end user, its API cannot be modal, due to the limitations of JavaScript. The function that creates and displays the dialog box has to return control to the browser before the dialog box is displayed onscreen; thus, the dialog box’s return value can only be passed to a callback function, not as a result of the original function call. On the other hand, the asynchronous API dictated by the JavaScript gives you a significant advantage over traditional dialog boxes: You can schedule a timeout after which the dialog box is closed automatically.
We’ve focused on constructing a simple dialog box that implements functionality equivalent to that of the Windows messageBox function. You can use the same techniques to construct a more complex dialog box, including one with form controls (for example, input fields). Obviously, you would have to modify the dialog box creation code as well as the keyboard event handler, which shouldn’t disable the default browser handling of all keys, like ours.