Главная
Напишите на WhatsApp
+7 (914) 32 00 603
Есть потребность создания pop-up окна или модального, как его еще называют. Решений много и все они сложные [подгружают кучу библиотек, скриптов и т.п.] либо занимают кучу времени на изменения внешнего вида - что тоже плохо.
На дворе 21 век и нет нужды подстраиваться под мамонтов или тех кто до сих пор пользуется IE 6, 7 версии или старыми Операми, Фоксами и т.д. Сайты нужно делать для современных людей и использовать современные технологии, если мы будем оглядываться назад и ровняться на прошлое - то далеко не уедим.
И так,
между <head> </head>
вставляем [если не работает без него или у вас на сайте нет использования библиотеки]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
В CSS таблицу стилей вставляем:
.popup__overlay {display: none; position: fixed; left: 0; top: 0; width: 100%;
height: 100%; background: rgba(0,0,0,.7);text-align: center }
.popup__overlay:after {display: inline-block; *display: inline; *zoom: 1; height: 100%;
width: 0; vertical-align: middle; content: '' }
/* Added for IE<9 compatibility */
.popup__overlay_ie { background: #000; opacity: .7; filter: alpha(opacity=70) }
.popup {display: inline-block; *display: inline; *zoom: 1;
position: relative; max-width: 80%; padding: 20px; border: 5px solid #fff;
border-radius: 15px; box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4);
background: #fff; vertical-align: middle }
/* Added instead of :after pseudoelement */
.popup__valignfix { display: inline-block; *display: inline; *zoom: 1;
width: 0; height: 100%; vertical-align: middle }
.popup-form__row { margin: 1em 0}
.popup__close {display: block; position: absolute;top: -20px;
right: 10px; width: 12px; height: 12px; padding: 8px;
border: 5px solid #fff; border-radius: 50%;
-webkit-box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.5),
0 3px 3px rgba(0,0,0,.5);
box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.5),
0 3px 3px rgba(0,0,0,.5);
cursor: pointer; background: #fff; text-align: center;
font-size: 12px; line-height: 12px; color: #333;
text-decoration: none; font-weight: bold}
.popup__close:hover {background: #ddd}
В самом низу до закрытия </body>
вставляем скрипт
<script>
p = $('.popup__overlay')
$('#popup__toggle').click(function() {
p.css('display', 'block')
})
p.click(function(event) {
e = event || window.event
if (e.target == this) {
$(p).css('display', 'none')
}
})
$('.popup__close').click(function() {
p.css('display', 'none')
})
</script>
В нужном месте страницы, вставляем код самого pop-up окна
<p><input type="button" value="Popup окно!" id="popup__toggle" /></p>
<!--[if lt IE 9]><div class="popup__overlay popup__overlay_ie"></div><![endif]-->
<div class="popup__overlay">
<div class="popup">
<a href="#" class="popup__close">X</a>
<h2>Hello!</h2>
<p>Текст текст текст в pop-up окне</p>
</div>
<!--[if lt IE 9]><div class="popup__valignfix"></div><![endif]-->
</div>
Всё!
Далее редактируйте стили и подгоняйте pop-up окно под свой шаблон.
