Всем привет!
В этой статье я выложу готовый код для сайта, с помощью которого вы сможете сделать всплывающее окно на CSS при клике по ссылке или через указанное время. Да, именно на CSS, при этом никакого JS или jQuery.
Всплывающее окно вы сможете вставить сообщение для пользователей, форму обратной связи, форму для входа или регистрации, видео ролик и т.д.

Всплывающее окно (Модальное окно) на CSS при клике по ссылке или через указанное время
Я думаю, стоит показать вам демонстрацию всплывающего окна:

[ демонстрация ]

Итак, чтобы заработало всплывающее окно, пропишите в CSS вот такие стили:

/* Базовые стили слоя, затемнения и модального окна */
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: none;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.65);
position: fixed; /* фиксированное позиционирование */
cursor: default; /* тип курсора */
}

/* активируем слой затемнения */
.overlay:target {
display: block;
}

/* стили модального окна */
.popup {
top: -100%;
right: 0;
left: 50%;
font-size: 14px;
z-index: 20;
margin: 0;
width: 85%;
min-width: 320px;
max-width: 600px;
/* фиксированное позиционирование, окно стабильно при прокрутке */
position: fixed;
padding: 15px;
border: 1px solid #383838;
background: #fefefe;
/* скругление углов */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
font: 14px/18px 'Tahoma', Arial, sans-serif;
/* внешняя тень */
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-webkit-transform: translate(-50%, -500%);
-ms-transform: translate(-50%, -500%);
-o-transform: translate(-50%, -500%);
transform: translate(-50%, -500%);
-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: -moz-transform 0.6s ease-out;
-o-transition: -o-transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}

/* активируем модальный блок */
.overlay:target+.popup {
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 20%;
}

/* формируем кнопку закрытия */
.close {
top: -10px;
right: -10px;
width: 20px;
height: 20px;
position: absolute;
padding: 0;
border: 2px solid #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
background-color: rgba(61, 61, 61, 0.8);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
text-align: center;
text-decoration: none;
font: 13px/20px 'Tahoma', Arial, sans-serif;
font-weight: bold;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s;
}

.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px;
}

.close:hover {
background-color: rgba(252, 20, 0, 0.8);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

HTML (Ссылки на вызов модальных окон):

<!-- Ссылки на вызов модальных окон-->
<a href="#win1">Открыть окно </a>

HTML (модальное окно):

<!-- Модальное окно №1 -->
<a href="#x" class="overlay" id="win1"></a>
<div class="popup">
Здесь вы можете разместить любое содержание, текст с картинками или видео!
<a class="close"title="Закрыть" href="#close"></a>
</div>

В строку №4 вставляете содержимое.

Теперь усложним немного задачу. Сделаем так, чтобы всплывающее окно появлялось через указанный промежуток времени. Потом, после закрытия окна, появлялась кнопка для повторного вызова этого же всплывающего окна.
Я думаю, лучше посмотреть работу кода в живую.

[ демонстрация ]

Итак, чтобы такого добиться, добавьте в CSS:

#wrap{
display: none;
opacity: 0.8;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
background-color: rgba(1, 1, 1, 0.725);
z-index: 200;
overflow: auto;
}

#window{
width: 400px;
height: 400px;
margin: 50px auto;
display: none;
background: #fff;
z-index: 200;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
}

.close {
margin-left: 364px;
margin-top: 4px;
cursor: pointer;
border: 2px solid #ffb5b5;
color: #ffb5b5;
background: #cc0000;
padding: 10px 14px;
border-radius: 30px;
font-weight: bold;
}

.close:hover {
color: #fff;
background: #f98d8d;
}

button#zayavka-fahcize {
/* float: right; */
position: fixed;
right: 5px;
bottom: 1px;
background: linear-gradient(to bottom, #0bc408 0%,#09a206 100%);
color: #fff;
font-size: 20px;
text-shadow: 0 1px 0 #757575;
padding: 4px 0 5px 0;
margin: 0;
cursor: pointer;
border: 0;
border-top: 1px solid #87c286;
border-right: 1px solid #0e780c;
border-left: 1px solid #0e780c;
border-bottom: 1px solid #0e780c;
box-shadow: 0 -1px 0 #0e780c, 0 1px 0 #fff;
width: 200px;
border-radius: 2px;
}

button#zayavka-fahcize:hover {
background: linear-gradient(to bottom, #0bc408 0%,#09a206 0%);
}

HTML:

<!--задний фон-->
<div onclick="show('none')" id="wrap"></div>
<!-- Всплывающее окно-->
<div id="window">
<!-- Крестик-->
<span class="close" onclick="show('none'); document.getElementById('zayavka-fahcize').style= 'display: block !important';">X</span>
<div>Тут много текста.....................</div>
</div>

<!--Кнопка, которая появится после закрытия всплывающего окна-->
<button onclick="show('block')" id="zayavka-fahcize">Заявка</button>

JS (тут без этого ни как):

<script ENGINE="text/javascript">
//скрываем кнопку изначально
document.getElementById('zayavka-fahcize').style= "display: none !important";

//Функция показа
function show(state)
{
document.getElementById('window').style.display = state;
document.getElementById('wrap').style.display = state;
}

<!-- появление окна попандер через 5 сек. -->
function explode(){
document.getElementById('window').style= "display: block !important";
document.getElementById('wrap').style= "display: block !important";
}
setTimeout(explode, 5000); //5000 это время, через которое нужно запустить функцию (5 секунд = 5000 миллисекунд)
</script>

Строка №17 – вы указываете в миллисекундах, когда должно появиться всплывающее окно. В моем случае это 5000 миллисекунд (5 секунд). Кстати, вам наверно будет интересно почитать статью про функцию setTimeout.

Это все, пользуйтесь на здоровье!
Ну и, естественно, не забывайте делиться с друзьями этой информацией!

Взято с сайта https_//bloggood.ru/vebmasteru/vsplyvayushhee-okno-modalnoe-okno-na-css-pri-klike-po-ssylke-ili-cherez-ukazannoe-vremya.html/

0 комментариев
Написать комментарий