Javascript-форум - Проблема с Dialog. Блокировка элементов формы

Здравствуйте. Столкнулся с такой проблемой. По нажатию на текст или картинку (не важно) вывожу на экран (модально) диалог (назовем его, Диалог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>