Modal jQuery dialog hidden behind overlay in ASP.net

Question

I am developing some Jquery dialog and found the dialog was hidden when I set Modal: true. When setting Modal: false, I found everything works as expected. Hope someone can help me.

<asp:Button ID="btnOpendialog" runat="server" Text="Button" ClientIDMode="Static" />

<div id="dialog">

<h1>Test</h1>
    <asp:Button ID="btnClickfromDialog" runat="server" Text="Button" />

</div>

$(function () {
    $("#btnOpendialog").click(function (e) {
        $("#dialog").dialog("open");
        return false;
    });

    $("#dialog").dialog({
        height: 200,
        modal: true,
        autoOpen: false,
        open: function () {
            $(this).parent().appendTo($("form:first"));
        }                              
    });
});

Answer 1

I fixed it. There aren't many people who're complaining about this issue. Is it just me? Anyway, here is how I fixed it. Quite simple when you know how.

.ui-widget-overlay
{
        z-index: 0;   
}