Когда мы беремся создать информационное окно , всплывающее при нажатие на ссылку или другой элемент HTML страницы, хочется сделать этот приём наиболее наглядным и эффектным.
Когда речь идет о наглядности, зрелищности и эффективности, есть смысл обратится к jQuery.

Итак , сегодня мы создадим плавающее окно – div с эффектом затемнения остального содержания страницы.

Наш рецепт можно будет условно разделить на три составляющие. Первым по списку стоит скрипт jQuery, вынесенный в отдельный файл divPopUp.js
Содержание данного файла приведено ниже:
/* весь функционал скрипта имеет смысл только когда загружена страница, по-этому мы используем стандартную для jQuery конструкцию $(document).ready */
$(document).ready(function($) {
var on = 0; /* служебная переменная следящая за состоянием окна: 0 - значит окно закрыто ; 1 - открыто */
/* ниже описана функция которая собственно позволяет окну появится из небытия */
function loadPopup() {
if(on == 0) {
/* если переменная состояния окна равняется нулю, изменяем свойства DIV фона с именем back, а именно: задаем прозрачность opacity индексом 0.6 - данный индекс может принимать значения от 0.1 до 1 - чем больше цифра, тем меньше прозрачность, следовательно - темнее фон back */
$("#back").css("opacity", "0.6");
/* fadeIn - один стандартных визуальных эффектов, переводится как Из затемнения, блок popup появляется быстрее, активация темного фона back происходит медленнее   */
$("#popup").fadeIn(500);
$("#back").fadeIn(1500);
/* служебная переменная переходит в состояние 1 - окно открыто */
on = 1;
}
/* функция открытия окна завершена */
}
/* функция закрытия окна и возвращения нормального цвета фона */
function off() {
if(on == 1) {
/* убираем окно-блок DIV с именем класса css "popup" с помощью эффекта Затемнение fadeOut */
$("#popup").fadeOut("normal");
/* возвращаем фону исходное состояние, дезактивируем затемненный фон back */
$("#back").fadeOut("normal");
/* не забываем про служебную переменную , возвращаем ей значение ноль */
on = 0;
}
/* функция закрытия окна завершена */
}
/* при нажатие на ссылку с класс css "showpopup" будет запущена функция открытия окна */
$("a#showpopup").click(function() {
loadPopup();
});
/* при клике на фоне HTML страницы, вне самого окна, окно закрывается */
$("div#back").click(function() {
off();
});
/* закрыть окно при клике на блоке с классом "close", здесь у нас будет расположен крестик */
$("div.close").click(function() {
off();
});
/* конец всей jQuery части */
});
Следующий, немаловажный пункт – написание каскадных стилей CSS , без которых наше окно не появится в нужно время на нужном месте , а фон не станет эффектно становится темным. Все стили мы затем поместим в файл divPopUp.css
#back {
/* задний фон по умолчанию не виден, его цвет черный, он занимает всё пространство по высоте и ширине, его позиция фиксирована , то есть при скроллинге он никуда не денется */
display: none;
height:100%;
width:100%;
z-index:10;
position: fixed;
top:0px;
left:0px;
background:#000;
}
#popup {
/* само всплывающее окно , ширину и высоту Вы можете задать на свое усмотрение , но нет смысла задавать их слишком большими, иначе окно займет весь экран, кроме того следует обратить внимание на свойство margin-left отступ слева , чтобы окно находилось по центру экрана это свойство следует указывать из расчета ширина окна деленная на два плюс два пиксела , например для ширины окна 300px, margin-left будет равняться 152px  */
display: none;
width: 700px;
height:250px;
z-index: 20;
position: fixed;
top: 25%;
left: 50%;
margin-left: -352px;
overflow-y:auto;
color: #000;
background-color: #fff;
border: 15px solid #4E981B;
border-radius: 15px 0px 15px 0px;
}
div.close {
/* блок с крестиком или ссылкой на закрытие окна */
position: absolute;
right: 8px;
top: 0px;
cursor: pointer;
color: red;
width:15px;
height:15px;
font-weight:bold;
}
*{
/* шрифт текста по умолчанию, к самому скрипту отношения не имеет */
font-family: verdana,arial,sans-serif;
font-size:9pt;
}
div.content {
/* блок находится внутри самого всплывающего окна */
padding: 0px 15px 0px 15px;
}
Теперь, когда мы рассмотрели и сам скрипт и относящийся к работе скрипта CSS , осталось не самое сложное , но самое основное: собственно само тело HTML документа.
В примере движок jQuery загружается с сайта ajax.googleapis.com , но лучше чтобы он загружался непосредственно с Вашего сайта.
<!DOCTYPE html>
<html>
<head>
<title>Всплывающее окно div jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" href="divPopUp.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="divPopUp.css.js"></script>
</head>
<body>
Приветствуем на нашем сайте. Хотите узнать больше? Откройте <a href="#" id="showpopup">эту ссылку</a>, для Вас откроется плавающее окно с дополнительной информацией.
<div id="popup"><div>Это информационное окно использует технологию jQuery в сочетании с CSS и стандартным HTML.
<br />Чтобы закрыть окно нажмите на красный крестик в правом верхнем углу этого окна.</div>
<div>[X]</div>
</div>
<div id="back"></div>
</body>
</html>

Теперь самое время ещё раз посмотреть как этот подробно разложенный пример плавающего DIV окна выглядит на деле.