Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Уроки » Модальное окно на HTML5, CSS3 и скрытых чекбоксах

Модальное окно на 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 и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

41 комментарий
  1. Марина:

    Здравствуйте, Андрей!

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

    Заранее благодарю за ответ.

    С уважением, Марина

    Ответить
    • driver:

      Здравствуйте, Марина!

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

      Если это оно самое, вам остаётся только встроить в тело окошка нужную вам форму.

      Будут вопросы, пишите.

      Ответить
  2. Максим:

    очень классный сайт, много что для себя из него подчеркнул. Спасибо!

    есть вопрос, возможно вы поможете в его решении ))

    интересует как можно сделать всплывающее модальное окно (попап) на определенной минуте при проигрывании видео, к примеру с youtube.

    я видел такое есть но как реализовать?

    Ответить
    • driver:

      Здравствуйте, Максим!

      Спасибо за отзыв. По вашему вопросу, как-то не было необходимости, да и в целом, к всякого рода всплывающим окнам отношусь, мягко говоря — отрицательно, делаю их только виде экспериментов, и поиска новых решений. «Попапы» при проигрывании видео, вообще считаю извращением, но оно кому-то надо, а значит есть и готовые решения. Если не особо вдаваясь в подробности, так сказать на вскидку:

      У видео (в html) есть такое свойство currentTime, определяет текущее время воспроизведения. По нему можете проверять на какой сейчас секунде видео находится пользователь и исходя из этого, выводить все что нужно

      В js это будет примерно так:

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

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

      Ответить
  3. Максим:

    ок, спасибо! будем применять на практике!

    Вам успехов и ждем новых постов!

    Ответить
  4. Алексей:

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

    Ответить
    • driver:

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

      Ответить
  5. Sergey:

    Классный пример, но я не могу до конца понять.

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

    Ответить
    • driver:

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

      Ответить
  6. Вячеслав:

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

    Ответить
  7. Elena:

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

    Заранее огромное спасибо за ответ!

    Ответить
  8. Гость:

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

    Ответить
  9. Дмитрий:

    Валидатор матерится , хер просциш , че ему не нравится !

    Line 1029, Column 51: The for attribute of the label element must refer to a form control.

    Ответить
  10. Дмитрий:

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

    Ответить
  11. Rinat:

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

    Ответить
  12. Владимир:

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

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться без комментирования

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru