Чистый html + css без JS. Удобо, быстро, минимум кода.Мой любимый вариант всплывающего окна используя ТОЛЬКО css.
.Window {
position:fixed;
font-family:Arial,Helvetica,sans-serif;
top:0;
right:0;
bottom:0;
left:0;
background:rgba(0,0,0,.7);
z-index:99999;
-webkit-transition:opacity .4s ease-in;
-moz-transition:opacity .4s ease-in;
transition:opacity .4s ease-in;
display:none;
pointer-events:none
}
.Window:target {
display:block;
pointer-events:auto
}
.Window>div {
position:relative;
margin:10% auto;
padding:30px 10px 10px;
background:#fff;
box-shadow:0px 0px 20px 2px
}
.close1 {
background:#c30;
color:#fff;
line-height:20px;
position:absolute;
right:-5px;
text-align:center;
top:-10px;
width:20px;
text-decoration:none;
font-weight:700;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:12px;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000
}
.close1:hover {
background:#900
}
<div id="popup" class="Window"><div> <a href="#close1" title="Закрыть" class="close1">X</a> [то что мы хотим поместить в попап]</div></div>
Для вызова просто используйте ссылку #popup. Один стиль = сколько угодно всплывающих окон с разным id. Адаптивно. <a href=»#popup»>Заказ звонка</a>
Как можно использовать?
- форма заказа звонка
- ютуб видео по клик на ссылку
- реклама или вывод любой другой информации
