Всем привет!
В этой статье я выложу готовый код для сайта, с помощью которого вы сможете сделать всплывающее окно на 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 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.
Это все, пользуйтесь на здоровье!
Ну и, естественно, не забывайте делиться с друзьями этой информацией!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274370 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220444 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181504
13 Ответов на комментарий - Всплывающее окно (Модальное окно) на CSS при клике по ссылке или через указанное время
Добавить комментарий
Метки: css, html, javascript, Вебмастеру, для сайта
Сначала
“…на CSS при клике по ссылке или через указанное время. Да, именно на CSS, при этом никакого JS или jQuery.”
а потом
“чтобы всплывающее окно появлялось через указанный промежуток времени.”
и
“JS (тут без этого ни как)”, “Строка №17 – вы указываете в миллисекундах”
На чистом CSS, но с таймаутом на JS… ))
Не спортивно! )))
А реализация на чистом CSS есть. ) И без JS/jQ таки можно обойтись. )))
Тогда в чем проблема, чего так сложно вместо этой лишней писанины, просто выложить код, если есть идеи как сделать без JS.
А то расплодилось критиков ))))
А почему оно называется “модальное”?
Модальным окном называют те окна, которое блокирует работу пользователя до тех пор, пока пользователь не закроет это окно.
Спасибо, буду знать.
Да пожалуйста. )))
Вот: (только без плюшек, один механизм показа по клику с задержкой):
А чем Вам мой код не устроил? Он намного красивее выглядит, эффектней и тоже на чистом CSS.
Тем, что, “на чистом CSS” – это без JS. ))
Плохо Вы читали статью и смотрели код. С JS, это был последний код.
Чем Вас не устроил первый код, на чистом CSS?
Привет, а можно добавить, чтоб при выхода с сайте, (Мышка ушла за header, также опять вылезало окно?)
Благодарю! Это то что я искала!!
Пожалуйста
Хорошая статья, вот если бы еще подсказали как сделать чтоб всплывающее окно, которое появляется через указанный промежуток еще и само закрывалось через определенный промежуток времени а не только нажатием на крестик????? Пробовал и так и так изменять ваш код, не получается…Буду благодарен.