Создаем модальное окно на HTML5 и CSS3
Модальные окна - часто используемый инструмент в арсенале веб-мастера. Он очень удачно подходит для решения большого количества задач, таких как вывод форм регистрации, рекламных блоков, сообщений и так далее.
Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на JavaScript, что может создавать проблемы при расширении функционала или обеспечении обратной совместимости.
HTML5 и CSS3 позволяют создавать модальные окна с необычайной легкостью.
Разметка HTML
Первый шаг на пути к созданию модального окна - простая и эффективная разметка:
HTML:
<a href="#openModal">Открыть модальное окно</a>
<div id="openModal" class="modalDialog">
</div>
Мы просто создаем ссылку “Открыть модальное окно”, которая указывает на элемент div openModal, который размещен ниже. Внешний вид формируется стилями в классе modalDialog.
Внутри элемента div размещается содержание модального окна. Также нужно организовать ссылку для закрытия окна. Для примера разместим простой заголовок и несколько параграфов. Полная разметка для нашего примера будет выглядеть следующим образом:
HTML:
<a href="#openModal">Открыть модальное окно</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close">X</a>
<h2>Модальное окно</h2>
<p>Пример простого модального окна, которое может быть создано с использованием CSS3.</p>
<p>Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.</p>
</div>
</div>
Создаем класс modalDialog и начинаем формировать внешний вид:
HTML:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
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;
}
Фон будет иметь небольшую прозрачность, а также располагаться поверх всех остальных элементов за счет использования свойства z-index.
В завершении устанавливаем переходы для вывода нашего модального окна и скрываем его в неактивном состоянии.
Может быть вы не знаете свойство pointer-events, но оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. Мы устанавливаем значение его значение для класса modalDialog, так как ссылка не должна реагировать на нажатие кнопки мыши когда активен псевдо класс “:target”.
Теперь добавляем псевдо класс :target и стили для модального окна.
HTML:
.modalDialog:target {
display: block;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.
Закрываем окно
Теперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:
HTML:
.close {
background: #606061;
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: #00d9ff; }
ДЕМО и ИСХОДНИК
Andreys
Участник
- Сообщения
- 576
- Реакции
- 40
Я три модальных окна сделал, если на зеленые квадратики по нажимать
1е - выезжает с верху
2е - появляется плавно
3е - появляется быстро
Демо ))
1е - выезжает с верху
2е - появляется плавно
3е - появляется быстро
Демо ))
FarMan
Местный
- Сообщения
- 58
- Реакции
- 9
Andreys
Участник
- Сообщения
- 576
- Реакции
- 40
по идее да, но учится их делать, нужно с примера, как в данном случае у верхнего товаррсча (и не ставьте мне что у меня орфография хромает)FarMan написал(а):мне казалось что такие простые вещи как модальные окна, все умеют делать)
BURS
Участник
- Сообщения
- 116
- Реакции
- 6
Зайди на ari-cosmo.ru и нажми кнопку Войти, это кстати и есть FFBURS написал(а):его можно преобразовать для FF ?
Buhhus
Участник
- Сообщения
- 109
- Реакции
- 39
falloman2
Местный
- Сообщения
- 48
- Реакции
- 6
да, есть несколько вариантов осуществления этого, зависит от того где именно ставить, но js поможет))Buhhus написал(а):А может кто нибудь подскажет, как сделать что бы модальное окно само открывалось, ну, скажем на главной странице, после авторизации на той же ФФ? Что бы там, к примеру, новость какую нибудь написать... чтоб не пропустил ни кто
Канстантин
Местный
- Сообщения
- 58
- Реакции
- 5
скинь стили, выплывающее, очень понравилось)Andreys написал(а):Я три модальных окна сделал, если на зеленые квадратики по нажимать
1е - выезжает с верху
2е - появляется плавно
3е - появляется быстро
Демо ))