Главная » Уроки » Модальные всплывающие окна с помощью 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. Здравствуйте автор статьи driver!

    У меня к вам вопрос, и просьба о помощи в одном лице)

    Хотелось бы прикрутить регистрацию/восстановление пароля к такому виду всплывающего окна на wordpress. Прикрутил авторизацию самостоятельно, а вот на регистрацию и восстановление (+сообщения о неверности заполнения данных) знаний не хватает. =(

    Пожалуйста, помогите!

    Ответить
    • driver:

      Максим, здравствуйте.

      Обратите внимание на новый плагин jQuery адаптивных форм регистрации и входа. Готовые формы с валидатором полей ввода, остаётся лишь правильно эти формы связать с функциями wp. Существуют и специальные плагины для WP, например SimpleModal Login, который добавляет всплывающую форму регистрации на WP-сайт. А мои окна, лучше всё же использовать, как информационный контейнер.

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

    А как поменять название заголовка в окне поделиться,например в twitter, вместо «Что нового?» написать «Поделиться ссылкой с читателями» ?

    У меня вот такой код,где тут и как можно переименовать?

    Ответить
    • driver:

      Дмитрий, я ничего не понял? )))

      Напишите код, выделите и нажмите кнопочку «код» над текстовым полем комментирования.

      Ответить
      • Дмитрий:

        У вас на сайте к примеру кнопка twitter,там заголовок «Поделиться ссылкой с читателями» вместо «что нового?» как можно изменить этот заголовок?

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

        Ответить
        • Дмитрий:

          код что то не пишется сюда,выделяю,нажимаю на код

        • driver:

          Давайте проверим, вот простой код ссылки:

          <a href="http://dbmast.ru/" rel="nofollow">Dobrovoimaster</a>

          а вот css:

          input {
              width: 100%;
              height: 48px;
              border: 1px solid rgba(255,255,255,.4);
          }

          Как видите, всё пучком)))

  3. driver:

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

    Ссылка


    <a href="http://twitter.com/dobrovoi" title="Это пример ссылки ведущей в мой twitter. Сюда и пишите всё что вам нужно" rel="nofollow">Ссылка</a>
    Ответить
    • Дмитрий:

      Нет,не ссылка а заголовок,посмотрите на фото,скриншот: mepic.ru/view/?id=9f3c62d...50ee2de73d5d7443

      У меня написано там «Что нового?» а хотелось бы изменить на «Поделиться ссылкой с читателями»как у вас.

      Скриншот моего кода: joxi.ru/8AnXRX7Fq491mO

      Ответить
      • driver:

        Понятно,))) это виджет кнопка от twitter, настраивается здесь, правда я не уверен, что вы сможете изменить там заголовок всплывающего окна при отправке твитта.

        Ответить
  4. Марина:

    Добрый день driver))) Вот незадача(((

    Поставила ваше окно (CMC Joomla) Встало, появляется, но вот никак не могу понять почему оно прокручивается. Видна только часть окна. Пыталась поменять CSS? но результата нет. Посмотрите пожалуйста terraelectronic.ru (сайт в разработке)

    Страница в верхнем меню -Доставка. Внизу несколько кнопок — ЗДЕСЬ и Открыть окно1.

    Спасибо!

    Ответить
    • driver:

      Доброго времени суток, Марина.

      В окно вы помещает большой объём информации, блок растягивается и выглядит не очень эстетично. Исправить это можно задав фиксированный размер высоты окна, например height: 500px; и добавить полосу прокрутки.

      Поместите все содержание внутри модального окна в дополнительный div-контейнер, всё кроме кнопки закрытия, получится должно следующее:

      <div class="popup">
      <div>
      Сюда размещаете любое содержание, картинки, текст, и т.д....
      </div>
      <a class="close" title="Закрыть" href="#close" rel="nofollow"></a>
      </div>

      Далее вам нужно в CSS найти следующие селекторы:

      .popup p, .popup div {
          margin-bottom: 10px;
      }

      Развести их, чтобы параграф p и блок div не дублировали свойства, и добавить полосу прокрутки для блока div, а также выставить нужную вам высоту этого блока, должно получиться следующее:

      .popup p{
          margin-bottom: 10px;
      }
      .popup div {
      	overflow:auto;
      	height: 500px;
      }

      Как понимаете, значение у высоты height: 500px; я указал лишь в качестве примера, вы можете выбрать любое другое, главное чтобы окно выглядело пропорционально.

      При увеличении высоты окна, так же можете поэкспериментировать с позицией появления, по умолчанию у меня выставлено значение 20% от верха страницы top:20%;

      .overlay:target+.popup {
      top: 20%; /* отступ от верха при появлении */
      visibility: visible;
      opacity: 1;
      }

      Надеюсь всё у вас получится.

      Ответить
  5. Марина:

    Доброй ночи! Сделала все по вашей рекомендации. Ничего! Окно зафиксировано и с места ни-ни. Может быть я не внятно выражаюсь((( Как я понимаю окно должно прокручиваться а страница под ним — нет. Всего текста все-равно не видно.

    Туплю(((

    Может где еще надо стили поменять.

    Только на это ваше окошка надежда. Так как, на скриптах окно не работает. Почему — не знаю. Да и Fancybox тоже не работает. Уже кучу инфы перелопатила и никак не выходит.

    Спасибо! Вы мне уже не первый раз помогаете)))

    Ответить
    • driver:

      Марина, это наверное я вас не понял, мы с вами сделали так чтобы всё содержимое умещалось в окне фиксированных размеров, добавили полосу прокрутки. Вам же видимо нужно, чтобы всё содержимое окна было на виду, а окно имело возможность прокручиваться вместе с содержимым страницы. Проделать это просто, достаточно изменить позиционирование окна с фиксированного position: fixed; на абсолютное position: absolute;, но тогда возникает другое препятствие для пользователей, если пользователь активирует окно находясь внизу страницы, он увидит нижнюю часть содержимого окна. Тем более вы разместили модальное окно внутри контейнера с контентом, надёжнее всё же вынести его за пределы базового контейнера(у вас это: <div id="back">) и подкорректировать значения позиционирования. А ещё лучше, конечно только на мой взгляд, оставить всё так как сейчас, т.е. модальное окно с полосой прокрутки, компактно, не отпугивает пользователя, и тем кому оно надо, воспользуются прокруткой. Всё познаётся в сравнении, попробуйте сменить позиционирование и всё поймете.

      Ответить
  6. Михаил:

    Хотелось бы просто выразить БОЛЬШУЮ благодарность driver. Подписан на всё переписывание рубрики. Всегда интересно почитать и воспользоваться советами. И всегда не откажет driver в помощи. Ещё раз спасибо.

    Ответить
  7. Марина:

    Добрый день! Ставила absolute;, все получилось. Но буду экспериментировать с css.

    Спасибо вам. Знаю, что вы всегда на связи)))

    Ответить
  8. Марина:

    Не джумла, а песня души))) Допилила. Теперь окно исчезает не сразу))))))))))))

    Зацените пожалуйста, может ошибки где еще увидите terraelectronic.ru/dostavka Спасибо!

    Ответить
    • driver:

      Рад за вас))

      Отпустите форму чуточку ниже, задайте не 2 а хотя бы 10% от верха, и у свойства z-index измените значение с 10 на 99999, иначе окно перекрывается формой поиска в самой верхней позиции.

      Да, и всё таки уберите width: 100%; из раздела .popup, тогда при уменьшении экрана, окно будет изменяться более корректно.

      Ответить
  9. Марина:

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

    Ответить
  10. Александр:

    Доброго времени суток. Такой вопрос. Станет ли все это на сайт на php? Ну и для пробы поставил на html пошло в чем ошибка. Код прилогается

    <a href="#win1" rel="nofollow"></a>
     <!-- Вызов окна через миниатюру изображения -->
    <a href="#win5" rel="nofollow"></a>
    <!-- Модальное окно №1 -->
       <a href="#x" rel="nofollow"></a>

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

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

    А чем по вашему отличается формирование стилей на сайтах php? Вся работа окон построена на css, остается правильно прописать html-каркас там где это вам необходимо.

    Для вставки сода в комментаримй воспользуйтесь кнопой «код», первый клик открывает а второй соответственно закрывает)))

    Ответить
  12. Александр:

    Я немного в этом деле профан. Не могли бы вы мне подсказать как правильно прописать код на две картинки. Вот код

    Ответить
    • driver:

      Для вставки кода в комментарий, существует кнопочка волшебная под названием «Код», прямо перед глазами, а так же, перед отправкой коммента, можете проверить что получится, нажав ещё одну кнопочку, не менее волшебную, под названием «Предпросмотр»

      Увижу ваш код, обязательно помогу, а так, я не волшебник, кнопки, вот они волшебные))))

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

Отправляя к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