Всплывающие блоки, формы на jQuery Colorbox

Есть много различных плагинов и скриптов для создания подобного функционала, но мы воспользуемся Colorbox. Это плагин для библиотеки jQuery. Сразу немного теории и расказ о том что нам нужно делать. Ну первое нам необходимо подключить jQuery и плагин jquery.colorbox, затем нужный блок необходимо поместить в 2 дива(div), верхний из них скрыть а внутреннему задать id который мы будем использовать в скрипте. Создать ссылку по нажатию на которую будет открываться наш блок, и в href ее прописать id блока. В итоге ваш код должен выглядеть примерно так.

Подключаем скрипты:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>

Подключаем стили, не забываем скопировать папку images из библиотеки Colorbox и подключить css:

<link type="text/css" rel="stylesheet" href="colorbox.css">
<link type="text/css" rel="stylesheet" href="style.css">

пишем html код:

<a class="inline" href="#show-block">Показать блок в всплывающем окне</a>
<div class="hidden">
<div id="show-block">
Тут любая нужная нам информация, например форма:
<form>
<input type="text" name="name" /&gt
<input type="submit" name="submit" />
</form>
</div>
</div>

содержимое style.css

.hidden {
	display: none;
}
#show-block {
	width: 200px;
	height: 200px;
}

теперь нам осталось написать скрипт на ссылку можно в отдельном файле, можно тут же:

<script type="text/javascript">
(function($) {
 $(document).ready(function() {
     $("a.inline").colorbox({inline:true});
 });
}(jQuery))
</script>