Ваш IP: 54.92.197.82

Главная » Модальное окно

Модальное окно

Создаем всплывающее окно при загрузке сайта без плагинов

1-й  вариант:

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

Перекопал в интернете много информации по установлению модального окна на сайт. В основном находится информация по установке при помощи плагинов, а это лишняя нагрузка на сервер. Я опишу способ установки модального окна с помощью одного небольшого скрипта и CSS. Способ очень простой.

Разметка всплывающего окна очень проста. Понадобятся всего лишь два блочных элемента div с идентификаторами id, для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент <div id="parent_popup"> отвечает за позиционирование, цвет фона, прозрачность и степень его затемнения при запуске всплывающего окна. Внутри контейнера <div id="popup"> будет размещаться само содержание модального окна. Также надо будет сделать ссылку для закрытия окна. Для  примера разместим простой заголовок и пару параграфов текстового содержания. В итоге получится разметка HTML примерно такого вида:

<div id="parent_popup">
  <div id="popup">
<h1>«Всплывающее окно при загрузке сайта»</h1>
    <p>Это пример простого модального окна, всплывающего при загрузке 
сайта, с эффектом затемнения фона и возможностью управления временем 
появления.</p>
    <p>Его можно использовать с различным содержанием, будь то просто
 объявление, реклама какого-либо продукта, подписная форма, форма 
регистрации или же форма обратной связи.</p>
<a class="close"title="Закрыть" 
onclick="document.getElementById('parent_popup').style.display='none';">X</a>
</div>
</div>

Для закрытия окна используется ссылка с небольшим javascript в атрибуте и определенным классом class="close" для возможности оформления внешнего вида кнопки закрытия через стили CSS. В разметке ссылка выглядит так:

<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>

Код этой разметки я устанавливал в самом конце файла header.php

Теперь необходимо установить небольшой скрипт. Устанавливайте его в файле footer.php перед закрывающим тегом </body>. Код скрипта:

<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 и сформируем базовый контейнер:

#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;
}

Для основы окна выставляеncz фиксированное положение position: fixed;, т.е. если прокручивать страницу при открытом окне, оно остаётся на месте. Зададим чёрный цвет для фона и добавим ему лёгкую прозрачность с расширением на весь экран. За счет использования свойства z-index, фон располагается поверх всех остальных элементов. В завершении, с помощью свойства display: none;, скроем его до момента активации javascript.

Теперь переходим непосредственно к оформлению внешнего вида самого модального окна. Здесь всё так же очень просто. Создаётся связующий идентификатор #popup и уже в нем определяются все необходимые параметры всплывающего окна. Задаем ширину модального окна и его положение на странице. Так же определяем цвет фона, устанавливается стиль и цвет границы вокруг элемента, добавляется эффект тени и немного закругляются углы информационного блока.

#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 и начинаем оформлять кнопку закрытия:

.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>

<div id="popup">
<figure>
<figcaption>заголовок</figcaption>
<div>содержание</div>
</figure>
</div>

Теперь надо вставить скрипт в файл footer.php перед закрывающим тегом </body>:

<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:

#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

Модальное окно обновлено: Апрель 10, 2017 автором: admin

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*