Всплывающие окна в HTML KickStart

Почитал пост о HTML KickStart и тут же решил опробовать вышеупомянутый набор скриптов и стилей. После рассмотрения решил его применить на практике на конкретный проект. Но меня неприятно удивило отсутствие всплывающих окон, не люблю я часто по страницам переходить. Такие задачи, как, например форма добавления нового пользователя, как мне показалось, должны не перекидывать юзера на новую страницу, а отображать то, что нужно, во всплывающем окне. Вот я и накидал скрипт для этого. Подробности под катом.

Актуальная на момент написания статьи версия HTML KickStart 0.9 MIT.

Первым делом я создал отдельный файл для своего JavaScript-а. Назвал я его «user.js» и положил в папку «js» и сразу подключил на странице.

<script type="text/javascript" src="js/user.js"></script>

Было решено максимально упростить добавление блоков на страницу так, чтобы можно было на лету вставлять эти блоки в код, но для начала нужно создать подложку, которая затеняет страницу. Прямо над закрывающим тегом body я вставил div с id bg:

<div id="bg"></div>

В style.css, лежащем в корне я прописал ему следующие стили:

#bg {
	width:100%;
	height:100%;
	position:fixed;
	top:0;left:0;
	background:black;
	display:none;
	z-index:601; /* так получилось, что у меню в KickStart стоит z-index 600 */
	opacity:0.3;
}

Блоку, который будет открываться я решил присвоить класс «hiddenBlock» и приписывать уникальный id:

<div class="hiddenBlock" id="createUser">Форма добавления пользователя</div>
<div id="bg"></div>

В css описал класс «hiddenBlock»:

.hiddenBlock {
	position:absolute;
	top:20%;
	left:50%;
	z-index:602;
	width:400px;
	background:#efefef;
	border: 1px solid #ccc;
	padding:10px 20px;
	border-radius:10px;
	margin-left:-210px;
	display:none;
}

К кнопке, которая должна открывать окно я добавил атрибут «box» с id окна, которое она должна открывать и добавил ей класс «show»:

<button class="medium blue show" box="createUser">Создать</button>

Чтобы закрыть окно, я создал в нем кнопку с классом «close»:

<button class="medium blue close">Закрыть</button>

Ну и сам код, наконец:

$(document).ready(function(){
	$(".show").click(function(){
		$("#bg").show();
		$("#"+($(this).attr("box"))).slideDown("fast");
	});
	$(".close").click(function(){
		$("#bg").hide();
		$(".hiddenBlock").slideUp("fast");
		return false; //чтобы не активировалась форма, в которой кнопка закрытия
	})
});

В итоге получилось так:

<button class="medium blue show" box="createUser">Создать</button>
<div class="hiddenBlock" id="createUser">
	<form action="index.php" method="post">
		Здесь следуют инпуты (не стал вписывать в примере)
		<button class="medium green">Создать</button>
		<button class="medium blue close">Закрыть</button>
	</form>
</div>
<div id="bg"></div>

Демонстрация работы
Надеюсь кому-нибудь эта информация будет полезна.