
В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования javascript, плагинов jQuery и т.д. Больший интерес вызывает возможность применения чистых стилей и неисчерпаемого потенциала новых функций CSS3.
Основываясь на разработках некоторых уважаемых буржуинов, они в этом плане ребята ушлые, получаются неплохие результаты, в плане создания модальных окон с помощью CSS3. Задача, в первую очередь состоит в том, чтобы добиться более-менее устойчивой кросбраузерности конечного результата, ну и конечно же, с наименьшими потерями, уменьшить общее количество кода, как в HTML так и в CSS, дабы облегчить жизнь многострадальным труженикам сайтостроения.
Что получается в итоге, у меня в этом плане на сегодняшний день, мы с вами и посмотрим, а заодно, и научимся делать всплывающие модальные окна с помощью «магии» CSS3.
Обновлено: 27.10.2017
Для начала, все те кого заинтересовала эта тема, можете взглянуть на пример работы модальных окон в различных вариантах и скачать исходники:
Не стоит воспринимать данный урок, как руководство к действию, так как на этом этапе удалось добиться уверенной поддержки лишь современными браузерами ( IE 9+, Firefox, Safari, Opera, Chrome ). С оглядкой на то, что древние версии браузера IE еще достаточно популярены среди пользователей, рекомендую рассматривать эту статью в виде некоего эксперимента, демонстрации возможностей 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 (), окно закроется и воспроизведение видео остановится.
Однако следует понимать, что для других видео-сервисов и танцы с бубнами будут другими))). Хотя всегда есть выбор — это использовать готовые специализированные плагины.
Веб-дизайнеры и предприниматели, которые живут в русскоговорящих странах, наверняка хотят иметь возможность пользоваться не только англоязычными шаблонами. Они также хотят иметь доступ к коллекциям русскоязычных готовых решений. Поэтому хотим обратить ваше внимание на новейший раздел HTML шаблонов на русском языке, который теперь представлен на маркетплейсе TemplateMonster. Стоит упомянуть о том, что текст для каждого из шаблонов был написан вручную. К тому же, вам не нужно обладать какими-то сверхъестественными знаниями в сфере программирования, чтобы создать впечатляющий онлайн-проект.
Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:
Косяк был обнаружен при выводе изображений. В общем окно уезжает за пределы экрана. Решил просто, поставив вместо 20% отступа — 5%. Но скорее всего, тут проблема в моем 15.6 экране. Думаю, надо будет предусмотреть просто изменение формата изображения в зависимости от экрана. Да, еще один момент. Всплывающие окошки шикарно работают на мобильных устройствах. За это огромное спасибо.
Здраствуйте а как зделать тоже самое только если ссылка вела на другой html, а не в этот же
Здравствуйте.
Используйте внутри модального окна фрейм с любой страницы и всё.
большое человеческое спасибо. правда я уже java skript научился использовать. но и ваш пример я тоже вставлю в свой сайт.
Спасибо за отзыв, буду рад если найдёте возможным показать рабочий вариант на своём сайте. Удачи!
Огромное человеческое спасибо!!!
не понял только одного момента (уж простите)
кликая на кнопку вызова окна мы вызываем ссылку с соответствующим ай-ди
а за ним уже идет див с содержимым окна...
чем обусловлена эта ссылка?
нельзя ли на прямую к диву?
Ссылка в данном случае выполняет роль фона затемнения и является связующим звеном с модальным блоком, можно конечно обратиться и на прямую к диву, поэкспериментируйте и вы увидите, что это совсем другая история.
спасибо
.close:hover добавил text-decoration:none; теперь на мой взгляд лучше смотрится, Х без подчеркивания. А сам материал большое спасибо эффект афигенный, представляю ваш труд. И отдельное спасибо за кнопку Закрыть. Респект!
Thanks! 😉
Огромное спасибо! Окна простые в реализации и отлично смотрятся!
Спасибо
Спасибо за пример. Однако я совсем не пойму каким образом происходит взаимодействие с div'ом. В ссылке нет на него никаких указаний. Выбирается первый div после ссылки. href="#x" зачем нужен? и без него все работает? Можете подробнее объяснить что происходит, что и где вызывается и в какой последовательности.
Взаимодействие с div'ом прописано на стороне css,
.overlay:target+.popup
А на счёт
href="#x"
всё просто, считается, что пустой якорьhref="#"
не совсем «кошерно», да и при переходе прокручивает вверх страницу, если много контента.Можете совсем отказаться от ссылки, использовав всё тот же div с определенным CSS стилем, но тогда закрытие окна возможно будет только по клику на кнопке закрытия. Конечно, станцевав с бубнами и эту задачку можно решить, только вот нужно ли.
Здравствуйте, сделал как у вас, однако кнопка закрытия не работает, вообще никак не закрыть окно, соответственно возникает проблема. Прошу помочь, возможно где-то что-то пропустил.
Здравствуйте, тёзка.
Если бы вы сделали именно так как у меня, всё бы работало, уж поверьте. Этому решению уже 3 года и за это время его раздербанивали на части, ковыряли код все кому не лень. Совместными усилиями было выявлено и исправлено ряд ошибок.
Это всего лишь предложенный мной, ещё один оригинальный вариант, как им воспользуются люди в дальнейшем, я просто не в силах предугадать, тем более не видя, что и как человече проделывает с исходниками.
Всё ведь очень просто. Берёте исходный код html и css, интегрируете в свой проект, при возникновении проблемы, описываете ёё как можно подробнее и я вам обязательно помогу. Очень часто ответ на свой вопрос можно найти в ранних комментариях, только кому оно надо читать какие-то комменты.
Могу конечно ошибаться, но кажется вам следует взглянуть на один из комментов: Тынц
Если вы используете у себя на сайте скрипт jquery для плавной прокрутки, конфликт возникнуть мог именно с ним. NeedHate дал по этому поводу исчерпывающие рекомендации.
Спасибо, разобрался в проблеме. Все дело было в невнимательности =)
Добрый день.
Примеры — классные! В конечном итоге более впечатляют, чем на JS. Использовал пример с IFRAME. Заморочка с прозрачностью: где выставить параметры iframe, чтобы бэкграунд был от попап дива (div)? В iframe allowtransparency прописал, но эффекта нет. И не могу сообразить как прописать закрытие окна из содержимого iframe, по поиску только примеры с JS, если вопрос понятен, прошу помощи.
Здравствуйте, Максим.
В селекторе
.popup iframe
пропишитеbackground
с нужным вам цветом. Если нужен прозрачный фон то используйтеbackground-color:transparent
, inheritнаследует значения родителя, или же заливку в rgba, степень прозрачности регулируете последним значением, например при
background: rgba(0, 0, 0, 0);
, по идее, фон должен стать абсолютно прозрачным и будет соответствовать заливке дива попап.Что качается второго вопроса, даже как-то и не задумывался при написании статьи о таком функционале. Думается мне, что 100% рабочего решения на чистом css просто нет.
Спасибо
Добрый день. А как можно передать параметры с основного окна в модальное окно?
?per2=$per1 в ссылке не работает.
т.е. у меня есть набор ссылок напротив каждого из товаров. И при нажатии на ссылку всплывает ваше окошко. Но я не знаю как предать в это окошко значение переменной — кода товара, напротив которого размещена ссылка.
Вышел из ситуации так: части названия окна присваиваю значение переменной и в код модального окна её уже передаю.
Добрый день!
Спасибо за замечательное окошко!
Не подскажете, у меня следующая ситуация:
В модальном окне у меня стоит кнопка, которая отправляет данные формы, расположенной в основном окне, выглядит так:
Однако, если данные, введенные в основном окне не верны (там стоит КАПЧА) — основное окно перезагружается, но вместе с ним снова выводится и модальное.
Как сделать, чтобы модальное снова не выводилось в такой ситуации, после нажатия кнопки SEND?