Недавно задался вопросом с выводом диалога с затухающим и не активным фоном, вышло в две функции. В body создается div #op c длинной и шириной равной текущему документу, с черным фоном и прозрачностью 0.7, поверх него накладывается наш див с диалогом. При клике вне диалога, срабатывает обратный эффект исчезновение диалога и возврат нормального фона.
Пример
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<script type="text/javascript" src="/public/js/jquery.min.js"></script>
<script type="text/javascript">
function mydialog(id)
{
$(id).show('slow');
$('<div id="op" style="position: absolute;z-index:100;" onclick="op_close()"></div>').insertBefore('body');
$('#op').css({
height: $(document).height(),
width: $(document).width(),
background: 'black'
}).fadeTo('slow', '0.7');
}
function op_close()
{
$('#op').fadeOut('slow');
$('#dialog').fadeOut('slow');
}
</script>
</head>
<body>
<div id="dialog" style="width: 700px;left: 30%;position: absolute;z-index: 101;display:no ne;" onclick="mydialog(this)">
Содержимое диалога
</div>
</body>
</html>