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

    33 комментария 1797

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

Демо

Телеграм-канал serblog.ru

Использование модального окна на 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 не будет опубликован. Обязательные поля помечены *