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

В этой статье мы рассмотрим самый простой способ сделать всплывающее окно на сайте при помощи HTML и CSS. Основное преимущество этого способа состоит в отсутствии использования JavaScript и Ajax, что гарантирует работу кода даже в браузере с отключенными скриптами (например, с установленным плагином NoScript).

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

Просто вставьте в любое место документа код

<div class="fixblocks">Любой текст здесь</div>


и задайте его расположение в CSS:

.fixblocks {
position: fixed; /* Фиксированное положение */
left: 0px; /* Расстояние от правого края окна браузера */
bottom: 0px; /* Расстояние снизу*/
padding: 5px; /* Поля вокруг текста */
background: #ffe; /* Цвет фона */
border: 1px solid #333; /* Параметры рамки */
}

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

Также вы можете разместить окно в центре страницы, тогда CSS код будет такой:

.fixblocks {
position: fixed;
top: 50%; /*Отступ от верха */
left: 50%; /*Отступ от левого края */
margin: -125px 0 0 -125px; /*Отступы*/
background: #ffe; /* Цвет фона */
border: 1px solid #333; /* Параметры рамки */
}

Фиксированное положение (свойство position: fixed) обозначает то, что всплывающее окно будет находиться в заданном месте даже при прокрутке страницы. В некоторых случаях более удобным решением будет абсолютное позиционирование (код position: absolute), позволяющее точно задать расположение элемента, но не фиксирующее его на одном месте. Поэкспериментируйте с параметрами, чтобы выбрать наиболее подходящий для вас вариант.

Как закрыть всплывающее окно (блок, div) по клику

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

Разместите в div специальную ссылку, в результате клика по которой будет происходить исчезновение окна:

<a title="Закрыть" href="#">Закрыть</a>

Скрыть всплывающее окно в мобильной версии: блок div только в полной версии

Также вы можете показывать всплывающее окно только в полной версии сайта. Для этого оберните всплывающее окно дополнительным блоком и установите для него параметр display:none в мобильной версии.
Тогда весь код будет выглядеть следующим образом:

HTML:
<div class="nogadjet">
<div class="fixblocks"><a title="Закрыть">Закрыть</a>
Текст в окне
<div></div>
CSS:
@media only screen and (max-width: 767px) {
.nogadjet {display:none;}

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

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

Меню сайта

Создание и продвижение сайтов
• Как сделать всплывающее окно на сайте

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