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

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

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

Способ №1 – на чистом html5 и javascript

Как ни странно, сегодня такое окно можно сделать без всяких jquery плагинов. Для этого нам потребуется элемент из html5 – 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) в отдельный javascript-файл и подключить его к html. Смотрите сами, как вам удобнее. Вот так выглядит страница, если ее открыть в браузере:

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

Как видите, его можно в любой момент закрыть. У меня оно выглядит нестандартно, так как я добавил некоторые стили селектору dialog:

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

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

Придаем модальные свойства

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

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

А чтобы фон при открытии модального окна затемнялся, добавьте такой код в css:

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

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

Минус вывода всплывающего окна на html5 с в том, что dialog поддерживается очень плохо. Конечно, сейчас я вам все показывал в последней версии Google Chrome и тут все отлично работает, но в целом тег поддерживается слабо, хотя можно подключить polyfill специально для этого элемента.

Да, зашел я тут на caniuse.com, поддерживает тег только Chrome и Opera на текущий момент.

Вариант для тех, у кого WordPress

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

В модальное окно можно вставить html-код, картинку или форму подписки.

Вариант 3 – на фреймворке Bootstrap

В Bootstrap поддерживает jquery-плагин modal.js. Если вы используете этот фреймворк в своей верстке, то оптимально создавать красивое всплывающее окно именно с его помощью. Для начала вам потребуется: скачать и подключить Bootstrap, скачать и подключить jQuery

Разместить нужный код на нужной странице, после чего написать небольшой веб-сценарий. Подробное описание этого способа с примером вы можете найти на сайте http://bootstrap-ru.com. Пожалуй, это и будет самый оптимальный способ.

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Юрий

    Полезная статья, надо будет попробовать, а рекламу в окна можно вставлять?

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree