jqModal对话框总是在叠加下

时间:2010-04-30 13:59:42

标签: jquery jqmodal

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

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

6 个答案:

答案 0 :(得分:2)

从我看到并尝试过你需要在对话框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引用)

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

答案 5 :(得分:0)

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

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