На сайте часто нужно вывести информацию в шапке о режиме работы или контактах. Чтобы не нагромождать информацию, её можно разместить во всплавающем окне, которое выводится по клику на какой нибудь элемент.
Простое всплывающее окошко можно сделать с помощью CSS и jQuery.
Для это добавляем код html на сайт:
|
1 2 3 4 5 6 |
<div class="wrap"> <div class="modal"></div> <div class="header"> <a href="#">режим работы</a> </div> </div> |
Скрипт вставляем в шапку или футер:
|
1 2 3 4 |
$('a').on('click', function(e){ e.preventDefault(); $('.modal').toggleClass('active'); }); |
И прописываем стиль для появления этого окошка.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.wrap { width:500px; margin: 0 auto; height:400px; background:red; position:relative; } .header { background:green; height:50px; } .modal { background:blue; height:200px; width:180px; position:absolute; right:10px; top:-210px; -webkit-transition: top 0.5s; -moz-transition: top 0.5s; -o-transition: top 0.5s; transition: top 0.5s } .modal.active { top:10px; } |
Источник кода взят тут: http://jsfiddle.net/iiil/7Ly6y/3/
