Question

i have a jquery ui dialog and i have a jqgrid on that dialog. When i click Add or Edit, the jqgrid popup (to have a popup on a popup), it shows up to enter in the data BUT . .

. .it shows up behind the jquery UI dialog (the zorder is wrong). Is there anyway to have the jqgrid popup set the correct Zorder so this window shows on top of (in front of) the jquery ui dialog so this is usable.

I have a screenshot below highlighting the behavior.

here is my code:

  $(document).ready(function () {

    $("#modalDialogContainer").dialog({
    resizable: false,
    height: 'auto',
    autoOpen: false,
    width: 1000,
    modal: false,
    buttons: {
        'Close': function () {
            closeModalPopup();
        }
    }
});
}); 

then later on a button click to launch the jquery ui dialog i have this:

$("#modalDialogContainer").dialog("open");

i found this link which seems to be someone experiencing the same issue and at the end it says its fixed but i don’t see this inthe jqgrid source code.

Answer 1

Z-index fixes the problem (as your comment mentions):

http://docs.jquery.com/UI/Dialog#option-zIndex