Всплывающие блоки, формы на 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" /> <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>
Комментарии
Про блоки все правильно. Но
Про блоки все правильно. Но формы не будут работать в colorbox без дополнительных танцев с бубном.
Добавить комментарий