Question

我有以下代码，我的智慧结束了，因为对话框总是出现在叠加层下面。任何建议都将非常感激：

<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>

Answer 1

从我看到并尝试过你需要在对话框div上使用包含的jqmWindow类并删除它：

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

您的代码应如下所示：

<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>

（你只需要改变脚本和css引用）

Answer 2

我相信你需要设置shift-edit-popup的位置：

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

Answer 3

您使用的是哪个版本的jqModal.js？

http://dev.iceburg.net/jquery/jqModal/的最后一个正式版与jQuery 1.4.x不兼容（请参阅http://forum.jquery.com/topic/jqdnr-dragging-problem-with-jquery-1-4和http://www.trirand.com/blog/?page_id=393/bugs/jqgrid-jquery-1-4/）。

如果您的版本“$（）”存在于jqModal.js中，则应将其替换为“$（document）”。您还可以下载固定版本作为jqGrid包的一部分：http://www.trirand.com/blog/?page_id=6。

Answer 4

检查叠加层和模态框的z-index值。

Answer 5

或许这会对您有所帮助：Understanding z-index

Answer 6

我很久以前遇到过这样的问题。尝试将DOCTYPE更改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jqModal对话框总是在叠加下

6 个答案: