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

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

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

DEMO

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


<div>
<a>Открыть окно</a>
<div id="window" class="gap">
<div class="gap-cont">
<a class="down" title="Закрыть">×</a>
<h3>Первое окно</h3>
Подробная инструкция доступна на сайте <a href="http://your-webstyle.ru" target="blanck">Ваш WEB Стиль</a>
</div>
</div>
</div>

надежный хостинг

Из примера видно, что наш код состоит из двух блоков:

  • Первый блок — ссылка на открытие окна.
  • Второй блок — само окно с нужным материалом.

Если вам необходимо сделать несколько всплывающих окно, продублируйте разметку и замените id="window" на id="ваш слово", так же необходимо заменить window в закрывающей ссылке
onclick="document.getElementById('window')

Теперь добавим немного стилей, ведь наше всплывающее окно для сайта, работает на чистом css.
Стилей немного


.gap {
display: none;
position: fixed;
z-index: 99999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
}

.gap-cont {
background-color: #fefefe;
margin: auto;
padding: 1em 1.5em;
width: 50%;
}

.down {
color: #f50000;
float: right;
font-size: 28px;
font-weight: bold;
}

.down:hover,
.down:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.gap и .gap-cont — это стили окна. Первый отвечает за размеры и позицию окна, второй за его внешний вид
.down и .down:hover,.down:focus — стили оформления кнопки закрытия.

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

Как реализовать 2 и более всплывающих окна, можно посмотреть на demo странице, так как дополнительных действий минимум, сложностей они не должны вызвать.

надежный хостинг
Поделиться в социальных сетях:

Еще по теме

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

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