Модальный диалог jQuery скрыт оверлеем div, если родительский диалог имеет фиксированную позицию - PullRequest
Новая
       18

Модальный диалог jQuery скрыт оверлеем div, если родительский диалог имеет фиксированную позицию

2 голосов
/ 14 апреля 2011

Один из моих диалогов jQuery определен в div, который имеет фиксированную позицию (нижний колонтитул страницы). Когда открывается модальное диалоговое окно jQuery, jQuery создает оверлейный div, который скрывает всю страницу, а затем помещает открываемый диалог сверху, имея более высокий z-индекс, чем оверлейный div. К сожалению, любой диалог, отображаемый в div с фиксированной позицией, перекрывается оверлейным div, хотя открываемый модальный диалог получил больший z-индекс, чем сам оверлей.

Следующий HTML-код, который я уменьшил в демонстрационных целях до проблемы, показывает разницу между диалогом внутри нефиксированной позиции div и внутри фиксированной позиции div: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link type="text/css" rel="stylesheet" href="/demo-webapp/faces/javax.faces.resource/themes/sam/theme.css?ln=primefaces&amp;amp;v=2.2.1" />
    <link type="text/css" rel="stylesheet" href="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.css?ln=primefaces&amp;v=2.2.1" />
    <title>CSS TEST</title><script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=2.2.1"></script><script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.js?ln=primefaces&amp;v=2.2.1"></script>

    <script>
    /*<![CDATA[*/
        jQuery(function() {
            jQuery("#dialog1").dialog({
                autoOpen: false,
                modal: true
            });

            jQuery("#dialog2").dialog({
                autoOpen: false,
                modal: true
            });
        });
    /*]]>*/
    </script>
</head>

<body>
    <div style="z-index: 1; position: static;" onclick="jQuery('#dialog1').dialog('open')">
        position: static; /* default */
        <div id="dialog1" title="Dialog1"></div>
    </div>

    <div style="z-index: 1; position: fixed; left: 100px; top: 100px" onclick="jQuery('#dialog2').dialog('open')">
        position: fixed;
        <div id="dialog2" title="Dialog2"></div>
    </div>
</body>

</html>

После загрузки страницы это выглядит так:

Page after it is loaded

Диалог в пределах нормального div отображается правильно

Первый диалог определен с нефиксированным позиционированным div, и диалог появляется нормально:

First dialog appears correctly

Наложение диалога в фиксированном элементе div

Обратите внимание, что при отображении второго диалогового окна, определенного в фиксированном позиционированном элементе div, пользователь не может щелкнуть по нему, так как он перекрывается наложенным div:

Second dialog does not appear correctly

Обратите внимание, что z-индекс оверлейного div в обоих случаях равен 1001, а z-индекс диалога равен 1002. Таким образом, оверлейный div не должен перекрывать диалог, но, к сожалению, это относится к диалогам в фиксированной позиции. отд.

Так как я использую Primefaces, я связан с jQuery 1.4.4. Проблема возникает в Firefox 4, последней версии и Safari, последней версии.

Можете ли вы восстановить эту проблему, и у вас есть решение для этого? Обратите внимание, что я не хочу размещать диалоговое окно за пределами фиксированного элемента div , хотя это решило бы проблему . Причина в том, что я использую шаблонизатор JSF, и поэтому нижний колонтитул моей страницы будет динамически заполняться контентом - в этом случае всплывающее диалоговое окно. Если бы мне пришлось разместить диалог где-то еще, это нарушило бы модульность.

Ответы [ 2 ]

5 голосов
/ 24 октября 2012

У меня здесь тоже самое, и я просто установил положение на оверлей, и это сработало. 

.ui-widget-overlay{
    position:fixed;
}
2 голосов
/ 20 апреля 2011

Я придумал это решение, которое при включении внизу страницы, шаблона и т. Д. Переводит каждое диалоговое окно в тег body. 

<script>
    /* Bug fix that moves every dialog directly into the body tag since some jQueryUI dialogs are
       sometimes not placed above the overlay div due to their parent divs */
    $(document).ready(function() {
        var body = $("html body")[0];
        $("div.ui-dialog").each(function() {
            $(this).appendTo(body);
        });
    });
</script>

При включении этого фрагмента в заголовок теги div.ui-dialog не обнаруживаются, поскольку эти div-ы получают динамически внедряемый класс ui-dialog. Так что это исправление должно быть выполнено после.

...