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

Апрель 23, 2013   Александр Маврин   33 комментария

WindowВсем привет. Знаете ли вы, что сделать модальное окно на 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 можно еще сделать таблицу зебру.

СКАЧАТЬ

Не стесняйтесь делиться записью в социальных сетях. Спасибо


33 комментария
  1. Максим:

    Добрый день! Подскажите пожалуйста, как решить подобную проблему: Я решил вставить ссылку на модальное окно #ModalOpen в пункт меню, а остальную часть, следующую после ссылки поместил в header.php
    Работает. Но — при загрузке страницы сначала появилась белая страница с кнопкой закрыть и содержимым этого окна а потом через секунду загрузилась сама страница… Как мне скрыть этот блок так, чтобы при нажатии на пункт меню оно открывалось, а при перезагрузке страницы не выводилась белая страница на полсекунды с содержимым этого окна? И ещё вопрос: как мне поместить в это окно форму авторизации и регистрации?

  2. Максим:

    Я просто хочу сделать авторизацию и регистрацию на сайте в модальном окне таким образом, чтобы это окно открывалось при нажатии на пункт меню «Авторизация». Но что ни пытался найти, то нужно ещё в ссылке дополнительные параметры прописывать… И ничего не выходило… А здесь как раз оптимальный вариант… Только надо в это модальное окно засунуть формы авторизации и регистрации и при этом чтобы выводилось это окно при нажатии на пункт меню… И при этом чтобы код засунуть в такое место, чтобы он не появлялся, пока я не нажму на пункт меню… А так же хочу сделать профиль пользователя, не страницу с изменением профиля, а с самим профилем, т.е. там должна просто отображаться информация о пользователе, а не форма изменения профиля…

  3. Максим:

    Оптимальный в том смысле, что надо просто найти место куда засунуть код и можно просто создать пункт меню в админке и просто вписать ссылку на модальное окно.

  4. Максим:

    Проблема в том, что при обновлении страницы, на которой открывалось это окно, на пол-секунды появляется белая страница, на которой в верхней левой части экрана появляется содержимое этого модального окна… И как мне туда вставить форму авторизации кодом типа [wppb_login] от плагина Profile Builder?

  5. Максим:

    Проблема в том, что при обновлении страницы, на которой открывалось это окно, на пол-секунды появляется белая страница, на которой в верхней левой части экрана появляется содержимое этого модального окна… И как мне туда вставить форму авторизации кодом типа [wppb_login] от плагина Profile Builder? При попытке вставить его туда, отображается просто это выражение, а не то что оно должно отобразить…

  6. Максим:

    Упс, из-за лагов с инетом написал 2 коммента…

  7. Добрый день! Проблема решена) Как у меня на сайте выглядят эти окна вы можете, перейдя по адресу который я только что указал в своих данных здесь) Очень хороший сайт и полезные посты)

  8. Я про ваш сайт говорю))) А у емня будующий сайт недвижимости) Кстати, можете подсказать, установил fancybox for wordpress всё работало нормально, кроме одного — не появлялась подпись при увеличении картинки… А сейчас вообще не открывается, просто нажимаю и не открывается… как кнопка, которая никуда не ведёт…

  9. И снова здравствуйте) А как мне в этом коде прописать, чтобы какая-то форма появлялась только если пользователь не авторизован, а когда авторизован, то другое содержимое?

  10. Я попробовал сделать условным php тегом, но сразу же весь сайт превратился в сплошную белую страницу, поэтому сразу же вернул как было… А не знаете, в каком файле редактируются пункты меню, и настраиваются? Хочу тогда условием показать, что пункт меню должен показываться только незарегистрированным пользователям и сделать пункт меню (со ссылкой на админку) только для админа…(Если не в настройках в админке)

    • Обычно в header.php. ищите wp_list_pages. Можно один пункт меню написать на HTML и уже для него прописывать php функцию, чтобы показывался только для зарегистрированных или как вам там нужно. Почитайте кодекс или форум WP. Наверняка есть что-то подобное.

  11. Максим:

    Сделал все как написано, прописал несколько видео, но почему то везде открывается одно и то же видео. Ссылки проверял все разные…
    в чем может быть дело? 😥

  12. Большое человеческое спасибо!
    И видео вставил и корзину, с Вашей помощью. 🙂

  13. Юрий:

    Вечер добрый ! Подскажите на одной странице всплывает только одно окно с одним содержанием или возможно несколько модальных окон на странице?

  14. Юрий:

    Подскажите ,как изменить скорость открытия и закрытия

  15. Юрий:

    Громадное спасибо за статью !!!!!!!! Использовал плагин easy modal, но окно прячется под header/ . Ваш вариант предпочтительней. СПАСИБО !!!!!!! ( если сможете подскажите скорость открытия ,закрытия)

  16. Тут главное, все очень просто, стили поставил и установил сам код, и больше не чего не нужно. Таких бы по больше!

  17. Привет всем! Друзья, подскажите пожалуйста как сделать чтобы модальное окно отображалось не по середине, а ближе к верхнему полю?

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

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