Всем читателям привет! На связи как всегда Денис Максимов!

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

Изменил стили у главного меню на сайте, добавил градиент и подчеркивание. Планирую сильно изменить стилизацию и дизайн на своем сайте, полезно что то менять со временем.

Вы наверное уже заметили, что при входе на мой сайт всплывает окно!? Так вот, не так давно Александр Крутицких задал мне вопрос, «Как сделать всплывающее окно для сайта, без плагина?», по другому его еще называют "модальное окно для WordPress сайта!

всплывающее окно для сайта

И вот, я решил написать для Вас статью, после того как проверил работу этого модального окна.

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

Всплывающее окно имеет несколько не сложных, но полезных настроек. Есть возможность изменить время до появления окна, сделать автоматическое закрытие через какое то время, добавить возможность сохранение куки (запоминает посетителя и не показывает ему больше окно). Все эти настройки делаются с помощью кусков кода. Дальше я подробнее опишу каждую настройку.

Создаем всплывающее окно для сайта.

Не забудьте сделать резервные копии файлов, в которые будете добавлять коды.

Для начала я Вам покажу рабочий вариант, который на данный момент стоит у меня.

Если хотите чтобы окно всплывало только на главной странице, то код, который ниже, ставите в файл index.php (основной шаблон сайта). Если хотите появление всплывающего окна на всех страницах сайта, тогда ставите код в файл header.php (заголовок, шапка сайта).

<div id="parent_popup">
  <div id="popup">
<h2>Приветствую на сайте</h2>
    <p>Ваш текст</p>
    <p>Ваш текст</p>
	<p>Ваш текст</p>
	<p>Подписаться на обновления</p>
	<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>
</div>
</div>

Этот код поставьте после тега <body> если в файле header.php.

Следующий код нужно поставить в файл footer.php (подвал сайта). Код ставим до тега </body>.

<script type="text/javascript">
$(function(){
if (document.cookie.indexOf('_visited=1') == -1) {
var delay_popup = 3000; /*время до активации окна 3 секунды*/
setTimeout(function(){
  document.getElementById('parent_popup').style.display = 'none';
}, 30000); /*время до автоматического закрытия окна 30 секунд*/
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
document.cookie = '_visited=1; path=/';
}
});
</script>

Время можете поставить свое, остальное не изменяйте.

Ну и последнее что нужно сделать, это присвоить модальному окну свои стили. Если Вы разбираетесь в CSS, то можете вообще все что угодно сделать, а если нет то будут стили как у меня.

Коды стилей соответственно ставим в файл style.css.

Ставим стили в style.css

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

#popup {
  background: #fff;
  width: 520px;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border: 10px solid #ddd;
  position: relative;
  /*--CSS3 Тени для Блока--*/
  -webkit-box-shadow: 0px 0px 20px #000;
  -moz-box-shadow: 0px 0px 20px #000;
  box-shadow: 0px 0px 20px #000;
  /*--CSS3 Скругленные углы--*/
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
   border-radius: 15px;
}

.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);
}

#popup h2 {
	font-size: 26px;
	color: #071580;
}
#popup p {
	font-size: 16px;
	color: #000;
}

Есть код дополнительный, с помощью которого можно закрыть всплывающее окно не кнопкой закрыть, а щелкнув на любое место экрана.

onclick="document.getElementById('parent_popup').style.display='none';"

Ставим код в это место:

<div id="parent_popup">

И должно получиться так:
<div id="parent_popup" onclick="document.getElementById('parent_popup').style.display='none';">

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

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

Вариант второй:

Код, только с настройкой активации окна:

Вставить в footer.php до </body>
<script type="text/javascript">
	var delay_popup = 5000;
	setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script>

Вариант третий:

Вставить в footer.php до </body>
<script language="javascript">
<!--
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>

Вариант четвертый:

Возможно нужно будет заменить "popup" на "parent_popup"

<script>
window.onkeyup = okno; // нажатие Esc, см. условие "e.keyCode==27"
document.getElementById('popup').onclick = okno;

function okno(e) {
  if (e.target.nodeName != 'DIV' && e.target.nodeName != 'FIGCAPTION' || e.keyCode==27) { // через && перечисляются теги, клинкув на которые окно не будет закрыто; сюда же можно включить тег A или IFRAME
    document.getElementById('popup').style.display='none';
    localStorage.setItem('popup1', 'none');
  }
}
if(localStorage.getItem('popup1')) {
  document.getElementById('popup').style.display='none';
}
</script>

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

 

Предыдущая статья: «Микроразметка для изображений!»