The JQuery modal dialog widget can be a useful tool on most Web pages. If you take a look at its structure in a tool such as FireBug you will see that it consists of a div that grays out the web page’s background, and another div that sits on top and that presents the modal dialog.
If you are adding absolute positioning and z-index markup to your Web page, then you will want to look a little deeper into the properties of your modal dialog widgets and how they interact with other elements on your Web page.
When an area of your page has a higher z-index than your modal dialog does, then the dialog will not be modal for that area, and may even be hidden by the area entirely. For example, if you have a text field on your form that is wrapped in an element with a z-index that is higher than that of your modal dialog, then your modal dialog will not gray out the text field. Even worse, the text field will remain editable which is certainly not desirable behavior.