Всплывающее окно на сайт — готовый код

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

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

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

Всплывающие окна на чистом HTML и JS

Перед тем как сделать всплывающее окно на сайте, стоит знать, что для этого вовсе необязательно использовать jquery-плагины. Для создания такого окна необходим элемент из HTML 5 под названием dialog.

<dialog>
  <p>Это окно, которое сделано на html5 и javascript</p>
  <button id="close">Закрыть</button>
</dialog>
<button id="show">Открыть всплывающее окно!</button>

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

Конечно же, это лишь разметка. Этот код будет функционален только в случае добавления Javascript. Стоит заметить в контейнер dialog можно вставлять любой контент: фото, видео, таблицы и т.д.

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

<script type = text/javascript>
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
  dialog.show();
};
document.querySelector('#close').onclick = function() {
  dialog.close();
};
</script>

Именно в этом формате необходимо вставить код в html-файл. Также можно скопировать данный код (за исключением тегов script) в отельный js-файл и подключить его к html. Оба способа удобны и функциональны. Выбор зависит от предпочтений разработчика. Если открыть страницу в веб-браузере, она будет выглядеть следующим образом:

Всплывающее окно

В этом примере на странице находится только одна кнопка. Однако на практике где-нибудь в виджете находилась бы кнопка, предназначенная для вывода всплывающего блока. Само окно будет выглядеть следующим образом:

Всплывающее окно

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

dialog{
border-radius: 20px;
background: yellow;
}

Стилей не так и много. Они представлены для примера и понимания возможность селектора dialog. На практике всплывающие окна можно стилизовать любым образом.

Как сделать всплывающее окно модальным

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

dialog.show();

И меняем ее на: dialog.showModal();

Для затемнения фона необходимо добавить следующий css-код:

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

Всплывающие окна в WordPress

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

Стоит добавить, что этот плагин позволяет добавлять в всплывающие окна html-код и изображения.

Всплывающие окна на Bootstrap

Учитывая, что Bootstrap поддерживает JS Modal, в случае использования этого фрейворка, целесообразно создавать всплывающие блоки при помощи данного jQuery-плагина. Но сначала необходимо скачать и подключить сам фреймворк и jQuery.

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



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *