Создаем всплывающее окно при загрузке сайта без плагинов
1-й вариант:
Наверняка Вам попадались на глаза сайты, при загрузке которых сразу, или с задержкой в несколько секунд появлялось всплывающее окно с различным содержанием. Такое окно называется модальным. В таком окне обычно располагается какое-то объявление, реклама, форма подписки или форма обратной связи и т.д. В итоге Вы сможете вставить в модальное окно все что угодно.
Перекопал в интернете много информации по установлению модального окна на сайт. В основном находится информация по установке при помощи плагинов, а это лишняя нагрузка на сервер. Я опишу способ установки модального окна с помощью одного небольшого скрипта и CSS. Способ очень простой.
Разметка всплывающего окна очень проста. Понадобятся всего лишь два блочных элемента div с идентификаторами id, для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент <div id="parent_popup"> отвечает за позиционирование, цвет фона, прозрачность и степень его затемнения при запуске всплывающего окна. Внутри контейнера <div id="popup"> будет размещаться само содержание модального окна. Также надо будет сделать ссылку для закрытия окна. Для примера разместим простой заголовок и пару параграфов текстового содержания. В итоге получится разметка HTML примерно такого вида:
Для закрытия окна используется ссылка с небольшим javascript в атрибуте и определенным классом class=»close» для возможности оформления внешнего вида кнопки закрытия через стили CSS. В разметке ссылка выглядит так:
<a class=»close»title=»Закрыть» onclick=»document.getElementById(‘parent_popup’).style.display=’none’;»>X</a>
Код этой разметки я устанавливал в самом конце файла header.php
Теперь необходимо установить небольшой скрипт. Устанавливайте его в файле footer.php перед закрывающим тегом </body>. Код скрипта:
| 1 2 3 4 5 | <script type="text/javascript"> $(function(){ if (document.cookie.indexOf('_visited=1') == -1) { var delay_popup = 3000; setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup); document.cookie="_visited=1; path=/"; } }); </script> |
Цифра в скрипте — 3000 означает задержку появления окна. В данном случае задержка будет в 3 секунды. Вы можете регулировать этой цифрой время появления окна на Вашем сайте
Теперь остаётся открыть файл style.css и прописать в самом конце такие стили:
1. Создадим идентификатор #parent_popup с помощью которого мы свяжем наше окно с javascript и сформируем базовый контейнер:
| 1 2 3 4 5 6 7 8 9 10 11 12 | #parent_popup { background-color: rgba(0, 0, 0, 0.8); display: none; position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; } |
Для основы окна выставляется фиксированное положение position: fixed;, т.е. если прокручивать страницу при открытом окне, оно остаётся на месте. Зададим чёрный цвет для фона и добавим ему лёгкую прозрачность с расширением на весь экран. За счет использования свойства z-index, фон располагается поверх всех остальных элементов. В завершении, с помощью свойства display: none;, скроем его до момента активации javascript.
Теперь переходим непосредственно к оформлению внешнего вида самого модального окна. Здесь всё так же очень просто. Создаётся связующий идентификатор #popup и уже в нем определяются все необходимые параметры всплывающего окна. Задаем ширину модального окна и его положение на странице. Так же определяем цвет фона, устанавливается стиль и цвет границы вокруг элемента, добавляется эффект тени и немного закругляются углы информационного блока.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #popup { background: #fff; width: 520px; margin: 10% auto; padding: 5px 20px 13px 20px; border: 10px solid #ddd; position: relative; /*--тени для блока--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--скругленные углы--*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } |
И на завершающем этапе, необходимо реализовать функционал закрытия окна и сформировать внешний вид кнопки. Для этого создаётся класс close и начинаем оформлять кнопку закрытия:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | .close { background-color: rgba(0, 0, 0, 0.8); border: 2px solid #ccc; height: 24px; line-height: 24px; position: absolute; right: -24px; cursor: pointer; font-weight: bold; text-align: center; text-decoration: none; color: rgba(255, 255, 255, 0.9); font-size: 14px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); top: -24px; width: 24px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background-color: rgba(0, 122, 200, 0.8); } |
Для кнопки закрытия мы установили цвет фона и степень его прозрачности. Определили положение, размер и насыщенность текста, добавили немного эффекта тени для текста. Затем определяем позицию кнопки, ширину и цвет рамки, а с помощью свойства скругления рамки, делаем нашу кнопку круглой, и для большей выразительности добавим легкую тень. В завершении, определяемся с изменением цвета фона при наведении курсора мыши на кнопку.
Думаю, что проблем с установкой модального окна не будет.
2-й вариант:
Рассмотрим еще один вариант. Принцип, тот же самый, отличие в самом коде. Окно показывается одному человеку только один раз при первом заходе на сайт вне зависимости от страницы, на которую он попал. Окно появляется спустя какое-то время после захода на сайт. Вы можете самостоятельно настроить это время в стилях CSS.
Весь код состоит из трёх частей. Начнём по порядку.
Первая часть отвечает за информацию, которая будет содержаться в окне. Этот код вставляется в файл header.php перед закрывающим тегом </head>
Теперь надо вставить скрипт в файл footer.php перед закрывающим тегом </body>:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script> window.onkeyup = okno; document.getElementById('popup').onclick = okno; function okno(e) { if (e.target.nodeName != 'DIV' && e.target.nodeName != 'FIGCAPTION' || e.keyCode==27) { document.getElementById('popup').style.display='none'; sessionStorage.setItem('popup1', 'none'); } } if(sessionStorage.getItem('popup1')) { document.getElementById('popup').style.display='none'; } </script> |
И остаётся прописать для окна стили в файле style.css Нижеприведённый код копируете и вставляете в самый низ файла style.css:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | #popup { display: table; position: fixed; top: 0; left: 0; z-index: 100; height: 100%; width: 100%; background: rgba(240,240,240,.9); visibility: hidden; animation: animaciya 1s 5s forwards; /* 5s - это количество секунд, по истечении которых появляется окно */ cursor: pointer; } @keyframes animaciya { from {visibility: hidden;} to {visibility: visible;} } #popup figure { display: table-cell; vertical-align: middle; } #popup div, #popup figcaption, #popup figure:before { max-width: 500px; /* максимальная ширина */ margin: 0 auto; border-style: solid; border-color: rgb(88,125,164); background: #fff; } #popup figure:before { /* стиль кнопки "закрыть" */ content: "закрыть"; display: block; padding: 0 1%; border-width: 4px 4px 0 4px; border-radius: 5px 5px 0 0; text-align: right; color: rgb(88,125,164); } #popup div, #popup figcaption { padding: 1%; cursor: default; } #popup figcaption { position: relative; border-width: 0 4px 0 4px; font-size: 150%; text-transform: uppercase; color: rgb(100,100,100); } #popup figcaption:before { /* стиль восклицательного знака, не поддерживается Google Chrome. Его можно заменить на что-то более приемлемое */ content: "26a0 20 20"; color: red; font-size: 150%; vertical-align: middle; } #popup div { border-width: 0 4px 4px 4px; border-radius: 0 0 5px 5px; } |
В стилях вы можете самостоятельно настроить внешний вид окна.
Посмотреть работу окна в действии DEMO
Статья была полезной?