Один з моїх діалогів jQuery визначений у divщо має фіксовану позицію (колонтитул сторінки). Коли модальний діалог jQuery відкрито, jQuery створює накладений поділ, який приховує всю сторінку, а потім ставить діалогове вікно, яке буде відкрито вгорі, з більш високим z-індексом, ніж роздільник накладання. На жаль, будь-який діалог, що відображається у ділі з фіксованою позицією, накладається дією накладання, хоча модальний діалог, який слід відкрити, отримав більший z-індекс, ніж сам накладення.
Наведений нижче HTML-код, який я з метою демонстрації зводив до проблеми, показує різницю між діалоговим вікном у розділі нефіксованого поділу позиції та у розділі неподвижної позиції:
<?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;v=2.2.1" />
<link type="text/css" rel="stylesheet" href="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.css?ln=primefaces&v=2.2.1" />
<title>CSS TEST</title><script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=2.2.1"></script><script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.js?ln=primefaces&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>
Після завантаження сторінки виглядає так:
Діалог у межах звичайного діва відображається правильно
Перше діалогове вікно визначається нефіксованим розміщеним ділом і діалогове вікно з'являється нормально:
Діалог у фіксованому розміщеному розділі накладений
Зауважте, що коли відображається друге діалогове вікно, визначене у фіксованому розміщеному div, користувач не може його натискати, оскільки він накладений накладеним div:
Будь ласка, не враховуйте, що z-індекс перекритого поділу знаходиться вобидва випадки 1001 і z-індекс діалогу дорівнює 1002. Отже, діловий наклад перекриття не повинен перекривати діалогове вікно, але, на жаль, це справа для діалогів у фіксованому поділі.
Оскільки я використовую Primefaces, я прив’язаний до jQuery 1.4.4. Проблема виникає в Firefox 4, останньому випуску та Safari, останньому випуску.
Чи можете ви реконструювати це питання і чи є у вас рішення для цього? Зауважте, що я не хочу розміщувати діалогове вікно поза встановленим розміщеним ділом хоча це вирішило б питання. Причиною цього є те, що я використовуюмеханізм шаблону JSF, а отже, колонтитул моєї сторінки динамічно наповнюватиметься вмістом - у цьому випадку діалоговим вікном, що з’являється. Це порушило б модульність, якщо мені доведеться розміщувати діалог десь в іншому місці.
Відповіді:
5 за відповідь № 1У мене тут те саме, і я просто встановив положення, зафіксоване на накладці, і воно спрацювало.
.ui-widget-overlay{
position:fixed;
}
2 для відповіді № 2
Я придумав таке рішення, яке при включенні на дні сторінки, шаблона тощо переміщує кожен діалог у тег тіла.
<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 теги, оскільки ці divs gt їх ui-dialog клас динамічно вводиться. Отже, це виправлення помилок має бути виконано після.