- 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
Capturing the Mouse Interactions
The modal dialog box should focus the user’s attention on the information or decision that needs to be addressed. Further, it should stop the user from interacting with the rest of the web page, to prevent unwanted side effects. For example, if you need to ask the user whether she really wants to discard all of her previously entered information, you shouldn’t allow her to click around the rest of the web page before deciding what she wants to do.
You can easily stop mouse interactions with a web page if you create an additional absolutely positioned element on top of the web page. The new element should cover the whole page (to stop all interactions) and be visible to the user (otherwise, she would be totally confused as all her mouse clicks stop working for no obvious reason). The best way to render the overlying element is to use the opacity parameter supported in one way or another by all modern web browsers.
To stop mouse interactions with the web page, our messageBox function creates an empty DIV element with the ID set to modalCanvas. The CSS stylesheet defines its layout and formatting:
- It’s absolutely positioned, starting at the upper-left corner of the page.
- Its width and height are set to 100%, thus covering the whole web page.
- The background color is set to white and 80% opaque, resulting in a nice grayed-out effect on the underlying web page.
- The Z-index is set to a very high value, to ensure the dialog box’s position in front of all other elements of the web page. (The Z-index of the dialog box has to be even higher, otherwise the modalCanvas would cover it as well.)
#modalCanvas {
position: absolute; left: 0; top: 0;
width: 100%; height: 100%;
background-color: rgb(255,255,255);
opacity: 0.8; filter: alpha(opacity=80);
-moz-opacity:0.8; -khtml-opacity: 0.8;
z-index: 5000;
}