Здравствуйте. Столкнулся с такой проблемой. По нажатию на текст или картинку (не важно) вывожу на экран (модально) диалог (назовем его, Диалог1), содержимое которого загружается из html-файла. На форме присутствует другой элемент, по нажатию на который поверх этого диалога выводится другой (тоже модально) диалог (Диалог2). Суть проблемы: после закрытия Диалога2 блокировка с Диалога1 вроде бы как и снимается, но вот элементы формы недоступны, так же нет возможности выделить текст, находящийся в Диалоге1. Как это можно пофиксить или обойти? Диалоги именно должны быть модальными.
Ниже я собрал простенький пример.
Головной файл (index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Тест</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dev/ui/ui.core.js"></script>
<script type="text/javascript" src="dev/ui/ui.draggable.js"></script>
<script type="text/javascript" src="dev/ui/ui.resizable.js"></script>
<script type="text/javascript" src="dev/ui/ui.dialog.js"></script>
<script type="text/javascript" src="dev/ui/effects.core.js"></script>
<script type="text/javascript" src="dev/ui/effects.highlight.js"></script>
<script type="text/javascript" src="dev/external/bgiframe/jquery.bgiframe.js"></script>
<script type="text/javascript" src="form.js"></script>
<link type="text/css" href="stylesheet.css" rel="stylesheet" />
</head>
<body>
<div id="formDialog" title="Первый диалог">
</div>
<div id="formDialog2" title="Второй диалог">
</div>
<a href='' onClick='showDialog(); return false;'>Показать окно</a>
</body>
</html>
Текст скрипта (form.js):
function showDialog()
{
$.ajax({
url: "dialog.html",
cache: true,
asyn: false,
success: function(html){
$("#formDialog").html(html);
$('#formDialog').dialog('open');
}
})
}
function showDialog2()
{
$.ajax({
url: "dialog2.html",
cache: true,
asyn: false,
success: function(html){
$("#formDialog2").html(html);
$('#formDialog2').dialog('open');
}
})
}
$(function() {
$("#formDialog").dialog({
bgiframe: true,
autoOpen: false,
width: 300,
height: 300,
modal: true,
resizable: false,
buttons: {'Закрыть' : function() {
$(this).dialog('close');
}}});
$("#formDialog2").dialog({
bgiframe: true,
autoOpen: false,
width: 300,
height: 300,
modal: true,
resizable: false,
buttons: {'Закрыть' : function() {
$(this).dialog('close');
$(".ui-widget-overlay").css('zIndex', $(this).parent('.ui-dialog').css('zIndex')-3);
}}});
});
Диалог1 (dialog.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<form>
<TABLE>
<TR>
<TD><label for="fio">Имя</label></TD>
<TD><input type="text" name="fio" id="fio" style="width:100%" value="" /></TD>
</TR>
<TR>
<TD><label for="email">E-mail</label></TD>
<TD><input type="text" name="email" id="email" value="" style="width:100%" /></TD>
</TR>
<TR>
<TD></TD>
<TD><a href='' onClick='showDialog2(); return false;'>Нажми меня!</a></TD>
</TR>
</TABLE>
</form>
</body>
</html>
Диалог2 (dialog2.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
А здесь просто сообщение
</body>
</html>
