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

Опубликовано: 01.09.2018

Всем привет!

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

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

Я думаю, стоит показать вам демонстрацию всплывающего окна:

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

Итак, чтобы заработало всплывающее окно, пропишите в 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 type="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 .

Это все, пользуйтесь на здоровье!

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css , html , javascript , Вебмастеру , для сайта

rss