Главная » Уроки » Модальные всплывающие окна с помощью CSS3 без Javascript

Модальные всплывающие окна с помощью CSS3 без Javascript

Модальные всплывающие окна с помощью CSS3 без Javascript

В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования javascript, плагинов jQuery и т.д. Больший интерес вызывает возможность применения чистых стилей и неисчерпаемого потенциала новых функций .
Основываясь на разработках некоторых уважаемых буржуинов, они в этом плане ребята ушлые, получаются неплохие результаты, в плане создания модальных окон с помощью CSS3. Задача, в первую очередь состоит в том, чтобы добиться более-менее устойчивой кросбраузерности конечного результата, ну и конечно же, с наименьшими потерями, уменьшить общее количество кода, как в HTML так и в CSS, дабы облегчить жизнь многострадальным труженикам сайтостроения.
Что получается в итоге, у меня в этом плане на сегодняшний день, мы с вами и посмотрим, а заодно, и научимся делать всплывающие модальные окна с помощью «магии» CSS3.

Обновлено: 03.01.2017

 
Модальное окно с помощью CSS3
 
Для начала, все те кого заинтересовала эта тема, можете взглянуть на пример работы модальных окон в различных вариантах и скачать исходники:

Не стоит воспринимать данный урок, как руководство к действию, так как на этом этапе удалось добиться уверенной поддержки лишь современными браузерами ( IE 9+, Firefox, Safari, Opera, Chrome ). С оглядкой на то, что древние версии браузера IE еще достаточно популярены среди пользователей, рекомендую рассматривать эту статью в виде некоего эксперимента, демонстрации возможностей CSS3.

Хорошо, теперь перейдем непосредственно к самой раскладке html кода и стилевого формирования нашего модального окна с помощью css3 )))

 

Шаг 1. HTML

Во-первых, давайте создадим основную разметку HTML. Как вы можете видеть, базовая конструкция довольно простая, если рассматривать именно html-разметку модальных окон и кнопок(ссылок), для их активации. Каждое модальное окошко, представляет из себя ничто иное, как стандартный контейнер <div>, с определенным содержание внутри и кнопкой «Закрыть», сформированной исключительно средствами css.

Далее приведу пример базовой html-разметки всплывающих окон и ссылок активации:

 

<!-- Ссылки на вызов модальных окон-->
 <a href="#win1" class="button button-green">Открыть окно 1</a>
 <a href="#win2" class="button button-red">Открыть окно 2</a>
 <a href="#win3" class="button button-blue">Видео в окне 3</a>
 <a href="#win4" class="button button-orange">Фото в окне 4</a>
<!-- Вызов окна через миниатюру изображения -->
<a href="#win5"><img title="" src="img/realism_lrg.jpg" width="150" height="150" alt="" /></a>
<!-- Модальное окно №1 -->
   <a href="#x" class="overlay" id="win1"></a>
   <div class="popup">
     Здесь вы можете разместить любое содержание, текст с картинками или видео! 
    <a class="close"title="Закрыть" href="#close"></a>
    </div>
<!-- Модальное окно №2 -->
    <a href="#x" class="overlay" id="win2"></a>
    <div class="popup">
     Здесь вы можете разместить любое содержание, текст с картинками или видео! 
    <a class="close" title="Закрыть" href="#close"></a>
    </div>
<!-- Модальное окно №3 -->
        <a href="#x" class="overlay" id="win3"></a>
        <div class="popup">
<h2>Заголовок</h2>
      Здесь вставляете видео своё или с любого стороннего ресурса, YouTube, Vimeo и т.д.(iframe, embed)...
        <a class="close" title="Закрыть" href="page.html" onclick="return false"></a><!-- Выключение видео при закрытии окна -->
        </div>
<!-- Модальное окно №4 -->
<a href="#x" class="overlay" id="win4"></a>
        <div class="popup">
<img class="is-image" src="ваша-картинка.jpg" alt="" />
        <a class="close" title="Закрыть" href="#close"></a>
        </div>
<!-- Модальное окно №5 -->
        <a href="#x" class="overlay" id="win5"></a>
        <div class="popup">
<img class="is-image" src="ваша-картинка.jpg" alt="" />
<a class="close" title="Закрыть" href="#close"></a>
        </div>

 
В вышеприведенном примере кода, для наглядности, в контейнерах модальных окон прописал краткие пояснения. Вам остается по аналогии, в div-контейнер всплывающего окна, поместить любое свое содержание, будь то простой текст, картинки или видео с любого стороннего ресурса, YouTube, Vimeo и т.д. Ссылки на вызов модальных окон, можете сделать текстовыми, или же оформить их в виде замечательных, градиентных кнопок, как в примере.
 

Шаг 2. CSS

Следующий шаг, это самое интересное, важно подготовить все необходимые стили, для нашего модального окошка, оформить внешний вид и добавить функционала. Базовые стили страницы я опустил, чтобы не вносить сумятицу, а некоторые правила, для большей ясности, разбавил комментариями:
 

/* Базовые стили слоя затемнения и модального окна  */
.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
/* фон затемнения */
    background-color: rgba(0, 0, 0, 0.65);
    position: fixed; /* фиксированное поцизионирование */
    cursor: default; /* тип курсара */
}
/* активируем слой затемнения */
.overlay:target {
    display: block;
}
/* стили модального окна */
.popup {
    top: -100%;
    right: 0;
    left: 50%;
    font-size: 14px;
    z-index: 20;
    margin: 0;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
/* фиксированное позиционирование, окно стабильно при прокрутке */
    position: fixed;
    padding: 15px;
    border: 1px solid #383838;
    background: #fefefe;
/* скругление углов */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
/* внешняя тень */
    -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);
    -ms-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.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
}
/* активируем модальный блок */
.overlay:target+.popup {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
}
/* формируем кнопку закрытия */
.close {
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    position: absolute;
    padding: 0;
    border: 2px solid #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    background-color: rgba(61, 61, 61, 0.8);
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    text-align: center;
    text-decoration: none;
    font: 13px/20px 'Tahoma', Arial, sans-serif;
    font-weight: bold;
    -webkit-transition: all ease .8s;
    -moz-transition: all ease .8s;
    -ms-transition: all ease .8s;
    -o-transition: all ease .8s;
    transition: all ease .8s;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    font-size: 12px;
}
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);    
}
/* изображения внутри окна */
.popup img {
    width: 100%;
    height: auto;
}
/* миниатюры слева/справа */
.pic-left, 
.pic-right {
    width: 25%;
    height: auto;
}
.pic-left {
    float: left;
    margin: 5px 15px 5px 0;
}
.pic-right {
    float: right;
    margin: 5px 0 5px 15px;
}
/* элементы м-медиа, фреймы */
.popup embed, 
.popup iframe {
    top: 0;
    right: 0;
    bottom: 0; 
    left: 0; 
    display:block;
    margin: auto;
    min-width: 320px;
    max-width: 600px;
    width: 100%;
}
.popup h2 { /* заголовок 2 */
    margin: 0;
    color: #008000;
    padding: 5px 0px 10px;
    text-align: left;
    text-shadow: 1px 1px 3px #adadad;
    font-weight: 500;
    font-size: 1.4em;
    font-family: 'Tahoma', Arial, sans-serif;
    line-height: 1.3;
}
/* параграфы */
.popup p {margin: 0; padding: 5px 0}

 
Как видите, дорогие друзья, всё довольно таки просто и никакой лишней мешанины. Если всё проделаете правильно, то получите в свой арсенал инструментов, замечательное , в котором сможете разместить любой контент, будь то текстовое содержание, фотографии, различные формы регистрации и обратной связи, или же видеоролики из любого стороннего источника. Экспериментируйте с параметрами, видоизменяйте окно, как вашей душе угодно. По возможности, делитесь в комментариях своими наработками, или же возникшими вдруг проблемами.
 
За основу были взяты материалы с различных буржуинских источников, безжалостно перелопачены, переработаны и собраны в более-менее стройную конструкцию, все мануалы по теме и не упомню, так что ......

Заключение:

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

<a class="close" title="Закрыть" href="demo.html" onclick="demo.html(); return false;"></a>

Можно просто использовать ссылку с пустым атрибутом href="", в обоих случаях происходит перезагрузка страницы и соответственно закрывается, и окно, и останавливается видео, костыль ещё тот конечно, но другого более действенного и валидного решения, без подключения javascript, на данный момент у меня нет.

В обновлении к статье Модальный блок видео на CSS3 расписал способ остановки видео с подключением в работу jQuery и YouTube JavaScript Player API. Видимо стоит продублировать и здесь.

Метод отлично срабатывает для встроенного видео с YouTube. В первую очередь, вам понадобится подключить библиотеку jQuery (если таковая у вас отсутствует), например, с сервиса Google Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Затем подключаете YouTube JavaScript Player API:

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>

С помощью API JavaScript, вы сможете управлять проигрывателем Chromeless Player и встроенным проигрывателем YouTube с помощью javaScript кода. Для нашего модального блока с встроенным видео, исполняемый js будет таким:

<script>
        var player;
        function onYouTubePlayerAPIReady() {
        player = new YT.Player('player');
        }
 
        $('#stop').click(function(){
        player.stopVideo()
        })
    </script>

Далее, фрейму(iframe) с видео, необходимо присвоить идентификатор, пусть это будет id="player".

<iframe id="player" width="853" height="480" src="https://www.youtube.com/embed/1IrR7l9pGF0" frameborder="0" allowfullscreen=""></iframe>

Кнопке закрытия модального окна, так же прописываем свой id:

<a href="#close" id="stop" title="Закрыть" class="close"></a>

При клике по кнопке с id="stop" будет вызвана функция player.stopVideo (), окно закроется и воспроизведение видео остановится.
Однако следует понимать, что для других видео-сервисов и танцы с бубнами будут другими))). Хотя всегда есть выбор — это использовать готовые специализированные плагины.

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

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

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

375 комментариев
  1. Алексей:

    <script> function openPopUp(){ // здесь нужно открыть всплывающее окно } </script>

    спасибо

    Ответить
    • driver:

      Это то всё понятно, не понятно к чему вы хотите привязать функцию, т.е. окно открывается по удару на кнопке/ссылке, или же всплывает самопроизвольно с некоторой задержкой при загрузке страницы, какой вам нужен функционал в итоге? Подгружать в диалоговом окне страницу html, или же формировать содержимое с помощью js? Вариантов масса, помочь вам разобраться готов, строить догадки по поводу ваших идей — нет.

      Приведу один пример:

      При клике на ссыль/кнопу, открывается диалоговое окно с содержанием существующей html-страницы:

      function openPopUp(url) {
      	newwindow=window.open(url,'name','height=450,width=500');
      	if (window.focus) {newwindow.focus()}
      	return false;
      }

      В ссылке указываем адрес страницы и через событие onclick отдаём её в js:

      <a href="страница.html" onclick="return openPopUp('страница.html')">Открыть Окно</a>

      В этом случае откроется стандартное диалоговое окно браузера(с тулбаром и меню), размером 500px на 450px, в котором будет выведено содержимое страницы .html

      Также можно сформировать содержимое окна непосредственно с помощью javascript.

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

    Ок. Поясню свою задачу. Имеется таблица, в ней данные. Для каждой строки таблицы имеются кнопки (button), которые удаляют либо редактируют данные (запись) в таблице. При нажатии кнопки «Редактировать» должно показываться всплывающее окно, в котором данные записи редактируются, при нажатии в этом окне «Сохранить» а) через DOM обновляются данные в таблице б) форма с измененными данными отправляется через ajax на сервер.

    Соответственно window.open не подходит, т.к. необходимо изменять содержимое DOM текущего окна. Ваш вариант всплывающего окна CSS как раз для этого случая удобен.

    Можно конечно вместо button использовать ссылки, но этот вариант мне не кажется правильным (стараюсь не использовать варианты подобные href="#", т.к. ссылки должны содержать URL, по которому ссылку можно открыть например в новом окне).

    Таким образом, меня интересует каким образом, можно из кода JS показать окно CSS из Вашего примера.

    Ответить
  3. Алиска:

    Огромное человеческое СПАСИБО за статью!!!!!!!

    Конечно пришлось долго копатья, чтобы дойти до сути, но это стоило того!!!! Да здравствуют всплывающие окна на чистом css!!! Да здравствует Андрей doborovoi!!! Ура товарищи!!! *смайлик с флажками*

    =D

    Ответить
    • driver:

      Спасибо, Алиска, повеселили))) Только всё же не стоит забывать, что метод не лишён недостатков, свистопляски с кроссбраузерностью, мобильные устройства опять же вносят свои коррективы

      Ответить
  4. Влас:

    Здравствуйте, у меня такая проблема, поставил код на текст в меню. То есть хочу, чтобы при нажатии на текст «Контакты» выскакивало окно.

    Все настроил все работает, но только когда нажимаю на контакты то есть www.сайт.ру/win1 ничего не происходит, а если обновляю страницу по этому адресу то окно появляется.

    Ответить
    • driver:

      Здравствуйте.

      Просто уберите из ссылки адрес сайта, оставьте только идентификатор #win1

      Получится следующее:

      <a href="#win1">Контакты</a>

      И всё будет хорошо)))

      Ответить
      • Влас:

        Так и стоит, но все равно не работает.

        Ответить
        • driver:

          Посмотрел, у вас используется скролинг, ссылки привязаны к блокам страницы, соответственно target скриптом обрабатывается на скролинг к тому или иному разделу div, в моих модальных окнах target на стороне css, происходит конфликт, в котором приоритет на стороне js. Оптимального решения, на данный момент, у меня нет(. Можете попробовать модальные окна на jQuery или же на скрытых чекбоксах. Хотя по моему разумению, лучше не нарушать макет и пользовать раздел контактов по умолчанию, логично и в соответствии с общей структурой вашей landing-страницы

  5. ALL:

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

    Ответить
    • driver:

      По идее, если делали всё как в демо, видео должно проигрываться сначала, так как закрытие окна с видеороликом реализовано посредством перезагрузки страницы, что не очень хорошо, но другого решения, без подключения js, у меня пока нет

      Ответить
  6. Здравствуйте! Не подскажете ли, почему всплывающее окно , а точнее затемнение, не распространяется на input поиска? (opencart 2.0). по ссылке прикрепил скриншот)

    z-index ставил, ничего не меняется. сможете помочь?)

    Ответить
    • driver:

      Здравствуйте, Анатолий.

      Всё что вижу по скрину(пытаюсь догадаться), это input поиска наслаивающийся на фон затемнения, однозначно баг с z-index. Увеличьте значение по максимуму, например у фона сделайте: z-index: 9999;, а у модального блока: z-index: 10000;. Так же посмотрите у формы поиска, это свойство вообще присутствует или нет, обратите внимание и на !important.

      Истина где то рядом, только вот я не телепат, извините)))

      Ответить
  7. А как сделать, что бы окно выплывало автоматически, через определенное время (к примеру через 15 секунд), и что бы в окне отображалась форма обратной связи? Я совершенно неопытный, по этому, буду признателен, за максимально подробную и полную информацию)))

    Ответить
    • driver:

      По этой теме у меня есть отдельный урок, посмотрите и всё поймёте: Тынц

      Ответить
      • Огромнейшее спасибо! Я хоть и не соображаю ничего в CSS, а сайт пишу по учебнику HTML, разобрался, и за пол часа сделал именно то, что хотел! Спасибо!!!

        Ответить
  8. gelik:

    спасибо, отличная статья, помогла

    подскажите, как мне можно закрыть модальное окно и убрать затемнение не нажимая на кнопку закрыть или куда-нибудь вне окна? У меня внутри модального окна форма и я хочу после успешной отправки данных закрыть окно и убрать затемнение

    я так понимаю все дело в стилях, но если сделать что-нибудь вроде — document.getElementById ('win1').style.display='none'; и т.д, то при следующей попытке открыть это же окно, оно уже не будет показано, т.к. display='none', вот хотелось бы реализовать такое же поведение, как если бы я нажал закрыть модальное окно.

    Ответить
  9. gelik:

    а, все, вопрос исчерпан, извините)

    Ответить
  10. Вадим:

    Не подскажите, как содержимое это всплывающего окна можно отправить на печать?

    Ответить
    • driver:

      Выделить, ударить правой кнопой и нажать слово «Печать» ))

      Ответить
      • Вадим:

        А серьёзно? Это открывшееся окно вообще на печать не выводится.

        Ответить
        • driver:

          А серьёзно, например в Chrome, окно, когда оно активно, отлично выводится на печать, как и вся страница, только некоторые свойства CSS3 игнорируются, и поэтому выглядит окно не совсем так, как нам этого хотелось.

  11. spirit:

    Здравствуйте!

    В вашем примере окно всплывает по ссылке

    <a href="#win1" class="button button-green">Открыть окно 1</a>

    как открыть по кнопке, событие onclick?

    <INPUT TYPE=submit id="" class="button_1_1" NAME="enter" VALUE="Вход" onclick="">

    Ответить
  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