Setting the Z-Index and Page Position of a JQuery Modal Dialog

Modal Dialog Markup

Modal Dialog Markup

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.

If you find this article interesting, then take a look at my collection of articles on JQuery and the JQuery Modal Dialog widget.

Something to Keep in Mind

You should be aware that the developers of JQuery have been changing the z-index of their UI widgets over time. If you update your JQuery library references to a newer version you may see z-index problems on your pages. Where the z-index of the modal dialog widget in older versions of JQuery was 1002, the z-index as of JQuery UI 1.10.2 is 100.

So if you are styling z-index levels for elements on your page you will need to ensure that you either style elements to be below the z-index of 100, or you need to set your modal dialog to be higher than the default z-index of 100.

How to Change the Z-Index and Position

If you are looking to increase the z-index or screen position of your modal dialog, you cannot set this at the level of the content div that you have your JQuery attach as a modal dialog. You will will need to set the style of the dialog elements themselves that are rendered by JQuery.

If you take a look at the markup generated by JQuery for your modal dialog (I’ve posted a screen capture at the start of this article), you’ll see how the modal dialog is built behind the scenes. Specifically, you’ll see that there are two main parts of the modal dialog that you need to control to properly increase its z-index. The elements are the div that encapsulates the main dialog element as well as the div that sets the gray background that disables your Web page (ie: that makes the dialog modal).

The CSS class list in FireBug for the dialog itself is: ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable

The CSS class list for the div that grays out the Web page contents is: ui-widget-overlay ui-front

I have highlighted the ui-dialog class for the dialog class since this seems the best for setting either position or z-index of the dialog. Likewise, I’ve highlighted the ui-widget-overlay class for the gray div.

Example of Setting the Z-Index and Position

Now that you know the classes for the JQuery dialog that you’ll need to set, you can do so either in CSS, or in JQuery’s CSS function in the dialog’s on open.

Let’s say, for example, that we want to increase the z-index of our dialog to 103. That means that we’ll have to style ui-dialog to a z-index of 103, and ui-widget-overlay to a z-index of 102.

Here is what the markup would be in CSS:

<style type="text/css">
.ui-dialog{
position:absolute;
top:70px;
left:600px;
z-index:103;
}
.ui-widget-overlay{
z-index:102;
}
</style>

Here is what the code would be in your JQuery constructor:

<script>
$(function() {
$( "#dialog-modal" ).dialog({
height: 140,
modal: true,
open: function (event, ui) {
 $('.ui-dialog').css('z-index',103);
 $('.ui-widget-overlay').css('z-index',102);
},
});
});
</script>

Below I’m providing two examples of HTML pages containing a modal dialog and a page element that is set to a z-index just below the modal dialog. The first example styles the dialog directly in CSS, and the second in the JQuery constructor code of the dialog.

Full HTML Page Example of Styling the Modal Dialog in CSS

Modal Dialog Z-Index

Modal Dialog Z-Index

Here we are setting the z-index of the dialog directly in CSS. You can change the z-index of the large absolutely positioned div to be above that of the z-index of the modal dialog. If you do so, you will see that the editable text field in the div remains editable even when the modal dialog is active. If you increase the z-index of the dialog to be higher than that of the div, then the modal dialog will restrict edit access to the form.

The image above shows how the text area in the absolutely positioned form element remains editable even with the JQuery modal dialog showing.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Basic modal</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
</script>
<style type="text/css">
.testElement{
background-color:red;
width:500px;
height:500px;
position:absolute;
top:50px;
left:100px;
z-index:101;
}
.ui-dialog{
position:absolute;
top:70px;
left:600px;
z-index:103;
}
.ui-widget-overlay{
z-index:102;
}
</style>
</head>
<body>
<div id="dialog-modal" title="Test modal dialog" class="modalClass">
<p>Here is some text within the modal dialog.</p>
</div>
<div id="contentDiv" title="Here is some content in a div">
<Table class="testElement">
<tr><td>
<p>Here is some content in a div.</p>
test is this text box is disabled: <input type="text" id="test">
</td></tr>
</table>
</div>
<p>Some random text to add substance to the page.</p>
</body>
</html>

Full HTML Page Example of Styling the Modal Dialog in the JQuery Constructor Function

As with the example above, you can see the interaction of the modal dialog with an absolutely positioned div that contains an editable text field. In this code, however, you can set the CSS attributes of the modal dialog in the Open event of the dialog’s constructor.

* Note that setting the CSS in script bypasses the deprecation of the JQuery zIndex  and stack properties.

* Also note that you should set the http-equiv=”X-UA-Compatible” meta tag so that this script works even with Internet Explorer that is running in quirks mode.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Basic modal</title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-modal" ).dialog({
height: 140,
modal: true,
open: function (event, ui) {
 $('.ui-dialog').css('z-index',103);
 $('.ui-widget-overlay').css('z-index',102);
},
});
});
</script>
<style type="text/css">
.testElement{
background-color:red;
width:500px;
height:500px;
position:absolute;
top:50px;
left:100px;
z-index:101;
}
</style>
</head>
<body>
<div id="dialog-modal" title="Test modal dialog" class="modalClass">
<p>Here is some text within the modal dialog.</p>
</div>
<div id="contentDiv" title="Here is some content in a div">
<Table class="testElement">
<tr><td>
<p>Here is some content in a div.</p>
test is this text box is disabled: <input type="text" id="test">
</td></tr>
</table>
</div>
<p>Some random text to add substance to the page.</p>
</body>
</html>
About these ads

5 thoughts on “Setting the Z-Index and Page Position of a JQuery Modal Dialog

  1. Pingback: Setting the Z-Index and Page Position of a JQuery Modal Dialog | Web App Dev | Scoop.it

  2. Pingback: Setting the Z-Index and Page Position of a JQuery Modal Dialog | JQuery-Features | Scoop.it

  3. Pingback: Setting the Z-Index and Page Position of a JQuery Modal Dialog

  4. Thanks for this article. I was having a problem where the grey overlay wouldn’t cover an element on my page. Most articles point to setting the z-index in a style tag to change the value however this wouldn’t work for me. Following your example and setting it in the dialog call itself worked. Thanks for putting me out of my misery.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s