jQuery UI Modal Dialog appearing underneath certain elements

Question

The dialog is appearing correctly and works the way it should. However, when I move the dialog around the page, a couple of elements will hover over the dialog i.e. the dialog is underneath these elements.

The surrounding area in relation to dialog greys out appropriately, except for the two elements that hover above the dialog; they retain their respective colors.

What both of these page elements have in common is that they are both background images (which I need them to be), set using the CSS background property. They're the only background images set on the page, so I'm assuming this is the reason, but I don't know why or how to fix it.

The behavior is the same in both Chrome and Firefox (dunno about IE, Opera or Safari).
I'm using jQuery 1.10.1 and jQuery UI 1.10.3 with roughly the following for the dialog:

$( "#launch-dialog" ).dialog({
    autoOpen: false,
    height: 'auto',
    width: 'auto',
    modal: true,
    buttons: {
        "OK": function() {
            $("#launch-dialog").text("");
            $( this ).dialog( "close" );
        },
      },
      close: function() {
          allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });

There's nothing special about the background images in how they're specified.
Can anyone help me out?

You need to check z-index property of those element which appears above the popup — Abhijeet kumar sharma, Jun 14 '13 at 20:50
Maybe this question is helpful: http://stackoverflow.com/questions/14954104/why-jquery-ui-1-10-remove-jquery-dialog-zindex-option — Barmar, Jun 14 '13 at 20:58

score 2 · Accepted Answer · answered Jun 14 '13 at 20:41

2

You should change the z-index property in CSS of the elements appearing on top of the dialog to a lower number. Sounds like it's higher than that of the actual dialog at the moment, hence your problems

answered Jun 14 '13 at 20:41

BaronVonKaneHoffen

1,902
1
21
29

I didn't know about the z-index property. Thanks, it's working properly now. – RTF Jun 14 '13 at 21:06

jQuery UI Modal Dialog appearing underneath certain elements

1 Answers1