Создаем модальное окно на HTML5 и CSS3

Модальные окна - часто используемый инструмент в арсенале веб мастера.  Он очень удачно подходит для решения большого количества задач, таких как вывод форм регистрации, рекламных блоков, сообщений и так далее.

Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на JavaScript, что может создавать проблемы при расширении функционала или обеспечении обратной совместимости.

HTML5 и CSS3 позволяют создавать модальные окна с необычайной легкостью.

demosourse

 

Разметка HTML

Первый шаг на пути к созданию модального окна - простая и эффективная разметка:

<a href="#openModal">Открыть модальное окно</a>

<div id="openModal" class="modalDialog">
	
</div>

Мы просто создаем ссылку “Открыть модальное окно”, которая указывает на элемент div openModal, который размещен ниже. Внешний вид формируется стилями в классе modalDialog.

Внутри элемента div размещается содержание модального окна. Также нужно организовать ссылку для закрытия окна. Для примера разместим простой заголовок и несколько параграфов. Полная разметка для нашего примера будет выглядеть следующим образом:

<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 и начинаем формировать внешний вид:

.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 и стили для модального окна.

.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);
}

Псевдо класс target изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства  pointer-events.

Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.

 

Закрываем окно

Теперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:

.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; }

Для нашей кнопки устанавливаем фон и положение текста. Затем позиционируем кнопку, делаем ее круглой с помощью свойства скругления рамки и формируем легкую тень. При наведении курсора мыши на кнопку будем изменять цвет фона.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
Перевел: Сергей Фастунов
Урок создан: 3 Октября 2012
Просмотров: 194181
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 3 Октября 2012 22:19
    bakenty88
    всем привет а как сделать что бы мод окно загружалось при старте страницы
    • 3 Октября 2012 22:59
      muha10
      кстате интересный вопрос, сам сталкивался с подобным аспектом, был бы доволен узнать ответ..
    • 3 Октября 2012 23:16
      ilyaashapatov
      А какие проблемы сделать display: block; по умолчанию для класса .modalDialog, а с помощью target закрывать его???
    • 10 Февраля 2013 09:12
      CyMpaK
      примени css стиль к тегу body
    • 28 Февраля 2015 14:18
      Oleg_Br
      с помощью jquery можно , вот функция которая запускается при загрузке страницы $(function(){});
  • 3 Октября 2012 23:19
    ilyaashapatov
    И вопрос к команде ruseller.com, ткните пальцем, где здесь html5???
    • 4 Октября 2012 13:56
      sanekglobov
      Ну в демке доктайп стоит от 5 хтмла, значит можно уверенно заявить, что использовался html5. =)
  • 3 Октября 2012 23:40
    teha
    Не первый год удивлялся тому, что на этом сайте к каждой второй статье пишут комментарии типа: "Огромное спасибо! То что нужно! Как раз сегодня это искал". И тут собрался сегодня реализовать вывод формы гостевой книги в модальном окне, а тут такой пост )) Спасибо Вам! Просто и качественно.
  • 4 Октября 2012 11:24
    ppaull
    Постоянно использую в проектах модальные окна. Но если использовать это - как быть многочисленным (к сожалению) пользователям ИЕ?
    • 5 Октября 2012 09:27
      G1zmo_O
      +1 ИЕ8- не поддерживается, а значит решение "пустышка". Даже в ИЕ9 не все хорошо.
      • 8 Октября 2012 11:52
        bori4
        пользователи ИЕ8 и 9 курят в сторонке. Не надо использовать калобраузер.
  • 4 Октября 2012 13:28
    rubyx
    По моему подобное было уже тут...
  • 10 Октября 2012 15:47
    fedor_kkk
    У меня такой вопрос. Сайт на шаблонной CMS, при открытии окна не на главной открывается модальное окно, а страница переходит на адрес вида misite.com/#openModal то есть на главную. Как исправить?
  • 22 Октября 2012 21:44
    popstar
    Привет Всем! Это по-моему взято с bootstrap. В bootstrap почти такое!
  • 1 Ноября 2012 19:25
    fedor_kkk
    вопрос почти решился: href="{url}/#openModal"
  • 2 Ноября 2012 20:28
    YuliyaDmytryk
    Классный пример! Спасибо! Только вот почему-то кнопка закрывания окна скачет... Я использую кнопки меню Apple в качестве ссылок. На html странице установлены: чат siteheart, флэш модуль, кнопки меню Apple (работают на JavaScript) и вот эти модальные окна. Пробовала использовать другие модальные окна - ситуация та же, кнопка закрывания окна все равно "скачет". Возможно есть какая-то несовместимость установленного на одной странице... Подскажите пожалуйста. P.S. Я далеко не программист, просто что-то иногда получается :)
  • 2 Ноября 2012 20:51
    YuliyaDmytryk
    вот еще, забыла написать адрес сайта, где это реализовано, чтобы понятнее было: welcom.su
  • 5 Ноября 2012 16:15
    karabin87
    Товарищи! Подскажите пожалуйста: а как сделать чтоб окно автоматически всплывала при переходе на сайт?
    • 12 Ноября 2012 02:48
      foxxxit
      используй JS alert
  • 20 Ноября 2012 18:39
    eurogurgen
    Спасибо огромное автору за скрипт, очень пригодился. Но есть один момент, как сделать чтобы модальное окно можно было прокручивать вниз при большом количестве текста? Очень выручите если подскажите!
    • 17 Декабря 2012 18:22
      Skyter
      Подскажите пожалуйста, как сделать чтобы при закрытии окна прекращалось воспроизведение видео?
  • 18 Января 2013 17:03
    samzemskov
    Всем привет. Как сделать, чтобы закрывалось при нажатии "esc", подскажите плз?
  • 4 Марта 2013 17:04
    ecco_arts
    не работает вместе с http://ruseller.com/lessons.php?rub_id=32&id=544 :(
  • 11 Марта 2013 15:15
    vpalex
    Какой можно придумать "костыль", чтобы это окно закрывалось в IE7 и IE8?
  • 28 Августа 2013 17:25
    lifeact
    Ребят уже мозг вынес, у меня картинка 1 200 пикс по ширине и 900 по высоте, хочу чтобы при клике по превью, показывалось полное изображение, пробовал с помощью lightbox (джаваскриптом), работает, но тогда конфликт с моим меню на джаве, менюха не работает, пришлось смотреть в сторону css, перелапатил массу вариантов, единственное что подходит это вариант в этой статье, так как у меня огромная картинка, ее нужно в модальное окно выносить, чтобы меня не ограничивал дизайн (узкая колонка сайта - 900 пикселов), но на маленьком (даже 17 дюймов) экране картинку обрезает и прокручивать это модальное окно нельзя.... подскажите как выкрутится?
  • 15 Октября 2013 16:04
    korean
    Меня интересует другой вопрос, а как сделать так, чтоб содержимое модального окна для каждой ссылки было разным,и при этом находились на одной странице. Заранее спасибо!
  • 15 Октября 2013 16:22
    korean
    Сам нашел решение своей проблемы,т.к. div id заполняется содержимым только один раз,но при этом оно не прописывается в CSS, то можно в конце добавлять номер или название,таким образом окно можно использовать многократно для разного содержимого, может не так умно,но все же может кому пригодится.
  • 21 Октября 2013 20:31
    Иван Пирогов
    как задать повторяемость фона при прокрутке модального окна вниз?
  • 10 Декабря 2013 19:43
    NataliaGasilova
    Добрый день! На одной странице 2 модальных окна, в одном форма обратного звонка, а в другом форма обратной связи по мейлу, первая работает корректно, а вторая нет...письмо приходит, но с ошибкой и странными значками! Сайт делаю сама...подскажите плиз, что может быть не так... Формы сделаны плагином Contact Form 7 и вставлены в модальные окна.
  • 18 Января 2014 21:32
    retailerukraine
    Что значить #(решётка) в самой первой ссылке openModal,что она делает?
  • 18 Января 2014 23:06
    retailerukraine
    Я удалил z-index и ничего не изменилось.Зачем он здесь?
    • 28 Февраля 2015 14:10
      Oleg_Br
      для того что бы наше модальное окно было поверх всех остальных элементов
  • 19 Января 2014 17:06
    retailerukraine
    Не понимаю как реализовано закрытие модального окна?
  • 27 Апреля 2014 18:04
    nofel.qurbanov.1
    Скажите пожалуйста как его заставит что бы сам всплывал?
  • 5 Мая 2014 16:01
    rusmoia
    Хороший урок. Но как сделать, чтобы при нажатии на пустое место на экране форма закрывалась? а то ее не закрыть на мобильных устройствах.
  • 23 Февраля 2015 12:29
    polarone
    Тоже столкнулся с тем, что при открытии и закрытии идет пересылка на главную. Чтобы открывало на той странице, на которой находимся добавил в ссылку
    $_SERVER["REQUEST_URI"]
    получилось:
    <a href="<?php echo $_SERVER["REQUEST_URI"] ?>#example" class="openModal">
    Тоже самое сделал и с ссылкой "Закрыть" НО! еще нужно подправить стили. Я добавил id в ссылку закрытия
    id="close2"
    и в стилях где встречается
    a[href="#close"]
    заменил на это
    a#close2
    Все стало работать как должно. Может где что и ошибся - поправьте.
  • 18 Мая 2015 14:30
    Екатерина Эсаулова
    Добрый день! Подскажите пожалуйста. У меня в модальном окне содержится форма для заполнения данных, после нажатия кнопки "отправить", модальное окно закрывается. Хотя там еще должно выводится сообщение: "Форма успешно отправлена". И это сообщение выводится, но пользователь его не видит, чтобы его прочесть, нужно еще раз нажать на ссылку, которая вызывает модальное окно. Как сделать, чтобы модальное окно не закрывалось после заполнения и отправки формы, а выводилось сообщение о том, что форма успешно отправлена.
  • 29 Мая 2015 13:58
    Dementr
    Здравствуйте как сделать чтобы при вызове модельного окна экран скролился на верх к модельному окну
  • 6 Ноября 2015 11:54
    pavlo273
    Здравствуйте, спасибо за статью. И у меня тоже вопрос, как сделать чтобы модальное окно можно было прокручивать вниз при большом количестве текста, так как если текста много получается, что его весь не видно? Спасибо за ответ.
  • 6 Ноября 2015 12:26
    pavlo273
    В принципе, нашел такое решение, добавил в .modalDialog:target overflow-y: auto; если есть лучшее решение, пишите.
  • 25 Марта 2016 14:01
    baboon
    pavlo273 - спасибо за код скроллинга! Пример прекрасно работает! и активно используется у меня на странице, ссылку на сайт дам позже, когда всё закончу. Спасибо!
  • 19 Апреля 2016 18:59
    Михаил Петров
    Выражаю автору благодарность, благодаря этому материалу, я сделал у себя на сайте форму заказа в модальном окне. Спасибо.
  • 2 Июня 2016 17:32
    KOSM
    Спасибо за код! Подскажите что нужно сделать чтобы Окно закрывалось при нажатии не только на "Крестик закрыть", а и так чтобы при нажатии на пустую область, подложку... происходило закрытие ??? Спасибо
  • 24 Августа 2016 22:46
    aromanov1978
    Вопрос в другом, а как сделать чтобы оно закрылось при обновлении страницы через F5 как положено?
^ Наверх ^