Модальное окно на CSS3 без JavaScript

Всем привет. Знаете ли вы, что сделать модальное окно на CSS без использования JavaScript или jQuery вполне возможно? Недавно я показывал пример модального окна на jQuery, но сегодня будем делать такое окно на CSS3 и HTML5. С развитием этих спецификаций стало возможно делать простые модальные окна без подключения внешних библиотек и что больше всего радует, так это поддержка подобных эффектов практически всеми браузерами, естественно последних версий. Но об этом немного позже. Сейчас давайте посмотрим пример и разберемся, где можно использовать модальное окно на CSS.

Демо

Использование модального окна на CSS

Вариантов использования модальных окон на сайте очень много. Но как вариант могу предложить это сделать примерно как на примере, с вставкой видео-контента. Как раз порекомендую почитать о влиянии видео-контента на посещаемость сайта. еще это может быть панель ссылок в боковой колонке, нажав на которую пользователь смог бы получать более развернутую информацию. Это могут быть и простые ссылки в контенте сайта, а так же картинки, при нажатии на которые открывалось бы окно с тем содержимым, которое вы хотите разместить. Эту технику можно применять если хотите сэкономить место на сайте. Формы подписки, регистрации, авторизации — все это можно реализовать в модальном окне на CSS.

Добавляем на сайт модальное окно на CSS

Добавляем в файл таблицы стилей следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

.Window {
 position: fixed;
 font-family: Arial, Helvetica, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.7);
 z-index: 99999;
 -webkit-transition: opacity 400ms ease-in;
 -moz-transition: opacity 400ms ease-in;
 transition: opacity 400ms ease-in;
 display: none;
 pointer-events: none;
}
 
.Window:target {
 display: block;
 pointer-events: auto;
}
 
.Window > div {
 width: 460px;
 position: relative;
 margin: 10% auto;
 padding: 30px 10px 10px;
 border-radius: 10px;
 background: #fff;
 box-shadow: 0px 0px 20px 2px;
}
 
.close {
 background: #cc3300;
 color: #FFFFFF;
 line-height: 25px;
 position: absolute;
 right: -12px;
 text-align: center;
 top: -10px;
 width: 24px;
 text-decoration: none;
 font-weight: bold;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 -moz-box-shadow: 1px 1px 3px #000;
 -webkit-box-shadow: 1px 1px 3px #000;
 box-shadow: 1px 1px 3px #000;
}
 
.close:hover { background: #990000; }

Теперь, в том месте, где хотите, чтобы появлялось модальное окно, нужно прописать следующий код:

1
2
3
4
5
6
7

<a href="#ModalOpen" title="">Открыть окно</a>
<div id="ModalOpen" class="Window">
 <div>
  <a href="#close" title="Закрыть" class="close">X</a>
  Здесь будет содержимое окна
 </div>
</div>

Google Chrome, Fire Fox, Opera, IE-9, Safari — в этих браузерах работает хорошо. Единственный косяк, который был замечен, это в браузере Сафари при размещении видео в модальном окне, оно почему-то не хотело до конца закрываться, хотя открывается хорошо. Приходилось перезагружать страницу. Это касается только видео-контента. При размещении текста, картинок — никаких ошибок не выявлено. Размер окна можно изменять через CSS, так что можно смело с этим экспериментировать. Теперь вы знаете, как делать модальное окно на CSS. И в завершении предлагаю скачать готовый пример и поделиться этой записью в социальных сетях. Спасибо. На CSS можно еще сделать таблицу зебру.

СКАЧАТЬ