jQuery UI dialog: modal overlay covering the dialog itself

I had a jquery UI dialog inside an asp.net UpdatePanel. It was working fine and I was using jquery UI’s older version. I thought upgrading all my jquery / UI references and updated to the jquery UI 1.10.3.

All of a sudden my jquery UI dialog became unusable as the modal overlay was coming up on top of the modal. Here’s simplified version of my dialog.

 $("#mydialog").dialog({
            modal: true,
            dialogClass: 'mydialogclass'
 });
$("#mydialog").parent().appendTo(jQuery("form:first"));

The last line was a workaround where I had to add the dialog back to the form after postback from ASP.NET UpdatePanel.

After digging into firebug, I came with a fix to set the z-index of my dialog container to higher than the overlay div - .ui-front{z-index:100;}

I update my mydialog class i.e.

.mydialogclass{ z-index:1000; }

That worked fine but I searched the web to see if that was the best way or if I was missing something.

I found there was a bug already reported and was resolved. After digging more I saw that it had to do with the appendTo workaround that I had used as above.

With jquery 1.10, they added new property called appendTo.

So I used that property like below and my dialog started working without using the css z-index workaround.

$("#mydialog").dialog({
            modal: true,
            dialogClass: 'mydialog',
            appendTo:$("form:first")
});

Hope this helps.