Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Модальное окно на HTML5, CSS3 и скрытых чекбоксах

Судя по комментариям, тема создания модальных окон довольно популярна. Я не раз уже описывал различные техники исполнения, как с помощью jQuery, так и на чистом CSS. Да и в интернетах, информации по теме предостаточно, и каждый может выбрать для себя оптимальный вариант.
Меня больше интересуют решения без использования javascript, не потому-что у меня какая-то фобия к js, нет, мне просто интересны эксперименты, поиск новых возможностей связки html+css, тем более что в последнее время возможности эти существенно расширились.
Скрытые чебоксы() я пару раз использовал при разработке блоков в стиле «аккордеон», почему бы не применить эту же методу и для реализации всплывающих(модальных) окон. Оказывается всё довольно просто, давайте рассмотрим подробнее, как с помощью свойств и новых синтаксических особенностей , можно быстро и без особых сложностей организовать на страницах своих сайтов работу привлекательных модальных окошек.

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

При формировании html-каркаса модального окна руководствовался принципами построения стандартной html-страницы, т.е. наше окно состоит из базового контейнера <div class="modal">, который в свою очередь разделён на сектора, слой затемнения, модальный блок <div class="modal-dialog"> с заголовком <div class="modal-header">, центральным блоком <div class="modal-body">, и подвалом <div class="modal-footer">.
 
Модальное окно на HTML5, CSS3
 

HTML Каркас

На ряду с использованием стандартных html-элементов тегов <input> и <label>, для определения состояния и свойства объектов, применил ARIA-атрибут из состава HTML5-спецификации, в частности атрибут aria-hidden, который показывает состояние «hidden» у текущего элемента, в нашем случае это связка тегов <input> и <label>, определяющие элементы пользовательского интерфейса модальных окон.

Атрибут for это ничто иное как идентификатор элемента, с которым следует установить связь, при использовании на одной странице нескольких модальных окон с различным содержанием, следует помнить о том, что идентификатор должен быть разным, установленным в соответствии с id того или иного мод. окна, for="modal-1", for="modal-2" и т.д.
 

<!-- Кнопка активации -->
<label class="btn" for="modal-1">Открыть</label>
<!-- Модальное окно -->
<div class="modal">
  <input class="modal-open" id="modal-1" type="checkbox" hidden>
  <div class="modal-wrap" aria-hidden="true" role="dialog">
    <label class="modal-overlay" for="modal-1"></label>
    <div class="modal-dialog">
      <div class="modal-header">
        <h2>Заголовок </h2>
        <label class="btn-close" for="modal-1" aria-hidden="true">×</label>
      </div>
      <div class="modal-body">
        <p>Здесь размещаете любое содержание...</p>
      </div>
      <div class="modal-footer">
        <label class="btn btn-primary" for="modal-1">Отлично!</label>
      </div>
    </div>
  </div>
</div>

CSS

Стилистика внешнего вида модального окна напоминает стиль всплывающих окошек из набора элементов Bootstrap, в случае необходимости, очень легко меняется в CSS. Непосредственно в код css прописал краткие комментарии, так что, вам будет легче разобраться, что к чему и зачем))).
 

/* Стили модального окна */
.modal-header h2 {
    color: #555;  
    font-size: 20px;
    font-weight: normal;
    line-height: 1;    
    margin: 0;
}
/* кнопка закрытия окна */
.modal .btn-close {
    color: #aaa;
    cursor: pointer;
    font-size: 30px;
    text-decoration: none;
    position: absolute;
    right: 5px;
    top: 0;
}
.modal .btn-close:hover {
    color: red;
}
/* слой затемнения */
.modal-wrap:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, .3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
}
.modal-overlay {
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 102;
}
/* активация слоя затемнения и модального блока */
.modal-open:checked ~ .modal-wrap:before,
.modal-open:checked ~ .modal-wrap .modal-overlay {
    display: block;
}
.modal-open:checked ~ .modal-wrap .modal-dialog {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
}
/* элементы модального окна */
.modal-dialog {
    background: #fefefe;
    border: none;
    border-radius: 5px;
    position: fixed;
    width: 80%;
    max-width: 500px;
    left: 50%;
    top: -100%;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    z-index: 103;
}
.modal-body {
  padding: 20px;
}
.modal-body p {
    margin: 0;
}
.modal-header,
.modal-footer {
    padding: 20px 20px;
}
.modal-header {
    border-bottom: #eaeaea solid 1px;
}
.modal-header h2 {
    font-size: 20px;
    margin: 0;
}
.modal-footer {
    border-top: #eaeaea solid 1px;
    text-align: right;
}
/* адаптивные картинки в модальном блоке */
.modal-body img { 
    max-width: 100%;
    height: auto;
}
/* кнопки */
.btn {
    background: #fff;
    border: #555 solid 1px;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    padding: 8px 15px;
    text-decoration: none;
    text-align: center;
    min-width: 60px;
    position: relative;
}
.btn:hover, .btn:focus {
    background: #f2f2f2;
}
.btn-primary {
    background: #428bca;
    border-color: #357ebd;
    color: #fff;
}
.btn-primary:hover{
    background: #66A1D3;
}

 
Если вам не нужен какой либо из разделов, например нет надобности в заголовке, просто исключите <div class="modal-header"> из конструкции, не нужен футер, убираете <div class="modal-footer">. Всё это хорошо видно на примере интеграции контактной формы в тело модального окна.
 
Модальное окно на HTML5 и CSS3
 
Для примера, использовал немного видоизменённую форму обратной связи, о вёрстке которой рассказывал ранее. Все элементы формы замечательно подстраиваются под размеры окна при просмотре на различных экранах пользовательских устройств.
 

/* Элементы формы контактов */
.textbox{
    height:45px;
    width:100%;
    border-radius:3px;
    border:rgba(0,0,0,.3) 1px solid;
    box-sizing:border-box;
    font-size:14px; 
    padding:8px;
    margin-bottom:20px;  
}
.message:focus,
.textbox:focus{
    outline:none;
    border:rgba(24,149,215,1) 1px solid;
    color:rgba(24,149,215,1);
}
.message{
        background: rgba(255, 255, 255, 0.4); 
    width:100%;
    height: 120px;
    border:rgba(0,0,0,.3) 1px solid;
    box-sizing:border-box;
    -moz-border-radius: 3px;
    font-size:14px;
    -webkit-border-radius: 3px;
    border-radius: 3px; 
    display:block;
    padding:10px;
    margin-bottom:20px;
    overflow:hidden;
}
/* кнопка "отправить" формы */
.btn-form{
    width:100%;
    height:45px;  
    border:rgba(0,0,0,.2) 1px solid;
    box-sizing:border-box;
    background: #dedede;
    color:#555;
    transition:background .4s;
}
/* Изменение фона кнопки при наведении */
.btn-form:hover{
    background: #f2f2f2;
}

Многие, очень многие, используют модальные окна для демонстрации различных изображений, так что предусмотрел и этот вариант. Картинкам, встраиваемым в тело окна, задал 100% ширину max-width: 100%;, при автоматическом определении высоты height: auto;, с помощью чего, изображения будут корректно отображаться при изменении размеров окна в ту или в другую сторону, получается такая вот адаптивность)).
 
Картинки в модальном окне
 
Чтобы получить эффект lightbox, когда изображение заполняет всё пространство всплывающего блока, достаточно убрать div заголовка, нижний блок с кнопкой и выставить необходимые отступы внутри модального окна, в селекторе .modal-body.

Если вдруг, захотите разместить в модальном окне видеоролик с YoTube, или другого видео-сервиса, воспользуйтесь способом, о котором я рассказывал ранее. Только следует помнить о том, что оптимального решения остановки проигрывания видео после закрытия окна, без подключения js, до сих пор не найдено, придётся довольствоваться не очень «кошерными» методами.

На этом всё! Остаётся лишь напомнить, что данный способ отлично будет работать только в современных браузерах, безоговорочно поддерживающих свойства CSS3, что одновременно является и его единственным недостатком.

Поковыряться в коде можно здесь.
В завершение, ещё раз посмотрите демо и при желании, для более детального разбора, скачивайте исходники, которые я бережно упаковал в архив, и выложил на своём Яндекс.Диске:

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 45

  • Марина: 17 декабря, 2014 в 11:50

    Здравствуйте, Андрей!
    Я могу сделать на кнопку(просто так скажем картинку) ссылку на сайт, при открывании которого получается модальное окно с формой подписки. Как это можно осуществить?
    Заранее благодарю за ответ.
    С уважением, Марина

    Ответить
    • driver: 17 декабря, 2014 в 15:56

      Здравствуйте, Марина!
      Если я вас правильно понял, вам нужно модальное окно всплывающее при загрузке сайта. Внешний вид окошка другой, но его очень легко подогнать. Модальное окно открывается после полной загрузки страницы по истечении 5 секунд, время задержки можете выставить другое.
      Если это оно самое, вам остаётся только встроить в тело окошка нужную вам форму.
      Будут вопросы, пишите.

      Ответить
  • Максим: 17 декабря, 2014 в 16:59

    очень классный сайт, много что для себя из него подчеркнул. Спасибо!
    есть вопрос, возможно вы поможете в его решении ))
    интересует как можно сделать всплывающее модальное окно (попап) на определенной минуте при проигрывании видео, к примеру с youtube.
    я видел такое есть но как реализовать?

    Ответить
    • driver: 17 декабря, 2014 в 18:59

      Здравствуйте, Максим!
      Спасибо за отзыв. По вашему вопросу, как-то не было необходимости, да и в целом, к всякого рода всплывающим окнам отношусь, мягко говоря — отрицательно, делаю их только виде экспериментов, и поиска новых решений. «Попапы» при проигрывании видео, вообще считаю извращением, но оно кому-то надо, а значит есть и готовые решения. Если не особо вдаваясь в подробности, так сказать на вскидку:
      У видео (в html) есть такое свойство currentTime, определяет текущее время воспроизведения. По нему можете проверять на какой сейчас секунде видео находится пользователь и исходя из этого, выводить все что нужно
      В js это будет примерно так:

      var video = document.getElementsByTagName(“video”)[0];
      var checkPoint = 150 // измерения в секундах
       
      //каждый раз, когда текущее время меняется
      video.ontimeupdate = function () {
      if(video.currentTime != checkPoint) return;
      /* тут все что хотите выполнить, когда достигается нужная точка времени */
      }
      var video = document.getElementsByTagName(“video”)[0];
      var checkPoint = 150 // измерения в секундах
      //каждый раз, когда текущее время меняется
      video.ontimeupdate = function () {
      if(video.currentTime != checkPoint) return;
      /* тут все что хотите выполнить, когда достигается нужная точка времени */
      }

      Как это будет работать на практике, не проверял, думаю, логично будет прикрутить функцию вызова мод.окна работающего на jQuey. Приведённый выше пример, никак не относится к модальным окнам из статьи.

      Ответить
  • Максим: 18 декабря, 2014 в 17:08

    ок, спасибо! будем применять на практике!
    Вам успехов и ждем новых постов!

    Ответить
  • Sergey: 4 февраля, 2015 в 23:05

    Классный пример, но я не могу до конца понять.
    Подскажите, как браузер понимает, что при нажатии на кнопку Отлично нужно закрыть модальное окно?

    Ответить
    • driver: 5 февраля, 2015 в 00:32

      При нажатии кнопки «Закрыть» используем атрибут aria-hidden со значением true. С кнопкой «отлично» так же как и с любыми чекбоксами, один клик по кнопке «открыть» ставит галочку(в нашем случае открывает окно), повторный клик галочку снимает(закрывает окно). Тоже самое происходит и при нажатии вне модального окна, так как фон затемнения тоже скрытый чекбокс)))

      Ответить
  • Вячеслав: 19 апреля, 2015 в 11:43

    а возможно с нажатием кнопки «Открыть» передать get параметры?

    Ответить
  • Elena: 23 апреля, 2015 в 17:10

    Спасибо большое, все супер. Только есть одно большое «но» — не работает на мобильных устройствах 🙁 Ни на яблоках, ни на андроидах. Подскажите, есть возможность заставить работать? Очень-очень нужно.
    Заранее огромное спасибо за ответ!

    Ответить
  • Гость: 8 июля, 2015 в 21:05

    Спасибо, большое спасибо!

    Ответить
    • driver: 9 июля, 2015 в 05:57

      Вам спасибо за отзыв.

      Ответить
  • Дмитрий: 9 июля, 2015 в 14:05

    Валидатор матерится , хер просциш , че ему не нравится !
    Line 1029, Column 51: The for attribute of the label element must refer to a form control.
    … …

    Ответить
  • Дмитрий: 9 июля, 2015 в 14:13

    + офигенно полезная штука для opencart, если для seo нужно убрать к чертям таблицы и разнести все как на allo.ua или на розетке , без использования скриптов (иначе page speed тебя сожрет криком «отключите скрипты или отложите их загрузку» ),а саму форму отзывов и комментариев разместить внутри модального окна! удобно и юзеру нравится ! из правок для планшетов 7# я бы только заменил % отступа от верха страницы , потому-что если форма большая доступа к низу формы нету, а портить вид скроллом не xочется !

    Ответить
  • Rinat: 24 июля, 2015 в 11:43

    Здравствуйте, подскажите как сделать чтоб, форма передовала значение переменных через POST,в вашем примере невозможно и через get передать.

    Ответить
  • Владимир: 11 августа, 2015 в 11:40

    Большое спасибо, очень помогли!

    Ответить
  • Илья: 18 августа, 2015 в 17:34

    Андрей,помогите!
    Я новичек. Помогите пожалуйста привязать css кнопку типа callbackhunter звонка к вашему модальному окну с формой обратной связи? Чтобы при нажатии на
    кнопку всплывало окно. Помогите это сделать. Сейчас получается кнопка мерцает но при нажатии не появляется окна. Очень буду рад помощи.Сильно,сильно
    надо.
    Выложил: http://jsfiddle.net/Heloboy/cd8sjz71/

    Ответить
    • driver: 18 августа, 2015 в 18:30

      Здравствуйте, Илья.
      Вот посмотрите: Тынц
      Ваш архив посмотрю немного позже и результат отправлю на мыло.

      Ответить
  • Александр: 29 августа, 2015 в 20:46

    Остается только вопрос — а как этим модальным окном перекрыть вообще все, что отображается на текущей странице.

    Ответить
    • driver: 29 августа, 2015 в 22:44

      Самое простое, это уменьшить или вовсе убрать прозрачность слоя затемнения.
      Если же вам нужно окно во весь экран установите width: 100%; и исключите max-width из стилей блока модального окна .modal-dialog.
      Добавьте высоту height: 100%; и уберите отступ от верхнего края при появлении top: 20%;, установив нулевое значение.
      В этом случае, на мой взгляд, получается форменное извращение, а не модальное окно)))

      Ответить
  • Сергей: 21 сентября, 2015 в 18:30

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

    Ответить
    • driver: 21 сентября, 2015 в 20:33

      Если я вас правильно понял и не особо вдаваясь в подробности, то примерно так: Тынц

      Ответить
      • Сергей: 22 сентября, 2015 в 13:28

        Спасибо! Осталась еще одна проблемка: как поместить swf-анимацию в модальное окно? Искал решения в интернете, но там либо плагины, либо за деньги.

        Ответить
  • Сергей: 23 сентября, 2015 в 17:31

    Не получается добавить в ваш пример выше swf-объект, помогите:

    Ответить
  • Иван: 23 ноября, 2015 в 14:17

    На IE 11 не работает, на IE 10 чекбоксы видны. Кто то решил эти проблемы?

    Ответить
    • driver: 23 ноября, 2015 в 17:25

      Здравствуйте.
      А никаких проблем и нет, в IE10 и 11 всё прекрасно работает: yadi.sk/i/mHERCq_tkfkfc , даже девятка пережевывает, правда без плавных переходов

      Ответить
      • Иван: 24 ноября, 2015 в 14:34

        Прошу прощенья, с IE 11 я где то не углядел, ваше демо работает, у меня на сайте нет буду разбираться. А в 10-ке prntscr.com/96bvts чекбоксы не скрыты, прикладываю скрин.

        Ответить
  • Алексей: 24 ноября, 2015 в 01:34

    Андрей, спасибо Вам огромное! Всё разжевано и в рот положено в очередно раз! Приятно смотреть, читать и применять на практике ваши советы!

    Ответить
    • driver: 24 ноября, 2015 в 02:20

      Алексей, за отзыв спасибо. Очень рад, что вам пригодилось)))

      Ответить
  • Ruslan: 6 декабря, 2015 в 20:21

    Очень полезный код. Спасибо большое! Единственное не могу найти, где указать email, на который прийдут данные с формы? Спасибо.

    Ответить
    • driver: 6 декабря, 2015 в 23:13

      Ruslan, спасибо за отзыв.
      Форма обратной связи здесь использована лишь в качестве примера возможностей использования модальных окон. Для полноценной работы формы вам потребуется подключить php-обработчик, вот именно в нём и указываете мыло, на которое будут приходить сообщения.
      По скриптам-обработчикам и привязке их к формам, информации в интернетах предостаточно.

      Ответить
  • Ruslan: 10 декабря, 2015 в 11:57

    Здравствуй, не могу разобраться как мне сделать дублирующую ссылку на модальное окно. Если я указываю Заказать обратный звонок! то первая ссылка которая с иконки телефона перестает работать. Менял «modal-1» на «modal-2» Думал может так разделятся, все равно. Спаисбо

    Ответить
  • Алексей: 28 декабря, 2015 в 11:46

    Здравствуйте! Спасибо огромное за полезнейшие уроки!)
    Я пытаюсь использовать ваше модальное окно как окно регистрации пользователей, но у меня возникает проблема: после нажатия кнопки «регистрация» модальное окно закрывается.
    Можно это как то исправить? мне нужно сообщить пользователю что всё хорошо или неверно введенно что то, а окно закрывается.
    Заранее Спасибо!)
    пс…мой код:
    <div class="login"> <label title="Контактная форма в модальном окне" for="modal-2">Регистрация</label>
    <div class="modal">
    <input class="modal-open" id="modal-2" type="checkbox" hidden>
    <div class="modal-wrap" aria-hidden="true" role="dialog">
    <label class="modal-overlay" for="modal-2"></label>
    <div class="modal-dialog">
    <div class="modal-header">
    <label for="modal-2" aria-hidden="true">X</label>
    </div>
    <div class="modal-body"> <?php
    $connect = mysql_connect('localhost','root') or die(mysql_error());
    mysql_select_db('Formoza'); if (isset($_POST['submit'])) {
    $name = $_POST['name'];
    $login = $_POST['login'];
    $password = $_POST['password'];
    $r_password = $_POST['r_password'];
    if ($password == $r_password){
    echo('OK');
    }
    else{
    echo('Пароли не совподают!');
    }
    } ?>
    <form metod="post" action="index.php">
    <input type="text" name="name" placeholder="Ваше имя" required><br>
    <input type="text" name="login" placeholder="Ваш логин" required><br>
    <input type="password" name="password" placeholder="Ваш пароль" required><br>
    <input type="password" name="r_password" placeholder="Повторите пароль" required><br><br>
    <input type="submit" name="submit" value="Регистрация">
    </form> </div>
    </div>
    </div>
    </div>
    </div>

    Ответить
  • Михаил: 11 февраля, 2016 в 01:03

    У меня не работает 🙁 ничего не происходит по клику, хотя стили прописаны также

    Ответить
    • driver: 11 февраля, 2016 в 01:30

      Моё демо у вас работает? Если да, то ищите ошибку на своей стороне. Проверьте путь до файла стилей, посмотрите отображаются ли они в инспекторе (F12 в Ghrome), в левой панели выбираете элемент модального окна и в правой панели смотрите, присутствуют ли необходимые селекторы, нет, значит отсутствует привязка к html.

      Ответить
  • Андрей: 27 марта, 2016 в 16:33

    Помогите изменить способ вызова модального окна с элемента lable на button! Поисковики индексируют тег lable, а мне не нужен лишний мусорный текст…
    Заранее спасибо!

    Ответить
  • Михаил: 17 августа, 2016 в 13:24

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

    Ответить
    • driver: 17 августа, 2016 в 20:50

      Очень просто. Находите селектор .modal-open:checked ~ .modal-wrap .modal-dialog и устанавливаете нужное значение в свойстве top. В примере у меня 20% от верхнего края top: 20%;, вам достаточно уменьшить это значение до необходимого, можете вплоть до нуля. Отрицательные же значения, выведут окно за пределы верхнего края страницы, собственно на этом и построено скрытие модального окна.

      Ответить
  • Антон: 9 сентября, 2016 в 00:49

    Здравствуйте, подскажите, как разместить ссылку в модальном окне на якорь на странице. Например, «#comments». Чтобы при клике на нее был одновременно переход к этому якорю и закрытие модального окна?

    Ответить
  • Роман: 8 ноября, 2016 в 21:19

    Крайне редко оставляю комментарии и этот случай — нонсенс! Вы помогли решить мою проблему красиво и ровно так, как надо! Поле действий ни в какую не хотело принимать якорные ссылки, а засорять скриптами код не есть комильфо. Чек боксы — то, что нужно! Спасибо!!

    Ответить
  • Денис: 20 ноября, 2016 в 17:35

    Здравствуйте! А как сделать чтобы окно закрывалось автоматически через например 5 секунд?

    Ответить
  • Владимир: 8 февраля, 2017 в 01:03

    Скажите пожалуйста, а как открывать (показывать) модальное окно при наведении на кнопку, а не клике?

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>