Search code examples
jqueryjqmodal

jqModal dialog always under overlay


I have the following code, and am at my wit's end because the dialog always appears under the overlay. Any advice will be most appreciated:

<head runat="server">
    <title></title>
    <link href="../Styles/jqModal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #shift-edit-popup
        {
            display: none;
        }
    </style>
    <script src="../Scripts/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="../Scripts/jqModal.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#shift-edit-popup").jqm({
                toTop: true
            }).jqmAddTrigger("#show-button");
        });
    </script>
</head>
<body>
    <form id="form" runat="server">
    <input id="show-button" type="button" value="Show" />
    <div id="shift-edit-popup">
        <div>
            <asp:Label ID="resourceLabel" runat="server" AssociatedControlID="resourceList">Resource:</asp:Label>
            <asp:DropDownList ID="resourceList" runat="server" DataTextField="Name" DataValueField="ResourceId" Width="120px">
            </asp:DropDownList>
        </div>
    </div>
</body>

Solution

  • From what I saw and tried you need to use the included jqmWindow class on your dialog div and drop the this:

    <style type="text/css">
        #shift-edit-popup
        {
            display: none;
        }
    </style>
    

    Your code should look something like this:

    <head runat="server">
        <title></title>
        <link href="Scripts/jqModal.css" rel="stylesheet" type="text/css" />
    
        <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
        <script src="Scripts/jqModal.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#shift-edit-popup").jqm({
                    toTop: true,
                    modal: true
                }).jqmAddTrigger("#show-button");
            });
        </script>
    </head>
    <body>
        <form id="form" runat="server">
        <input id="show-button" type="button" value="Show" />
        <div id="shift-edit-popup" class="jqmWindow">
            <div>
                Resource:
                <select><option value="1">One</option><option value="2">Two</option></select>
            </div>
        </div>
    </body>
    

    (You just need to change the script and css references accordinly)