Диалог jqModal всегда под наложением - PullRequest
Новая
       8

Диалог jqModal всегда под наложением

3 голосов
/ 30 апреля 2010

У меня есть следующий код, и я нахожусь в конце моего ума, потому что диалог всегда появляется под оверлеем. Любой совет будет наиболее ценным: 

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

2 голосов
/ 04 мая 2010

Из того, что я увидел и попробовал, вам нужно использовать включенный класс jqmWindow в вашем диалоговом окне div и выбросить this: 

<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 голос
/ 06 мая 2010

Какую версию 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.

1 голос
/ 04 мая 2010

Я считаю, что вам нужно установить положение shift-edit-popup: 

<style type="text/css">
    #shift-edit-popup
    {
       display: none;
       position : relative;
    }
</style>
0 голосов
/ 07 мая 2010

Я столкнулся с такой проблемой не так давно. Попробуйте изменить DOCTYPE на это: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
0 голосов
/ 04 мая 2010

Возможно, это будет полезно для чтения: Понимание z-index

0 голосов
/ 30 апреля 2010

Проверьте значения z-индекса наложения и модального поля.

...