Как сделать всплывающее окно modal. Создаем модальное окно с помощью HTML5 и CSS3
В данном уроке мы научися создавать модальное окно с помощью HTML5 и CSS3. В уроке мы не будем использовать JS, только полностью CSS3. Модальные окна можно использовать для формы обратной связи, для фото и видео и еще есть множество вариантов его применения.
Начинаем делать наше модальное окно.
Шаг 1. Разметка HTML
Первым делом нам нужно сделать HTML-разметку, т.е. сделать ссылку по которой будет открываться окно, и сделать каркас нашего окна. Для этого пишем вот такой код:
Шаг 2. Содержимое модального окна
Теперь добавим само содержимое нашего окна. Сделаем заголовок и небольшой текст и поместим это все в тег и вставим в код вместо многоточия . Еще нужно вставить ссылку, по которой будет закрываться наше окно и придать ей class="close" . Вот так должен выглядеть ваш код:
ПРОЕКТ REDSTARREDSTAR - проект посвященный вопросам, которые Вас так давно интересовали. На данном проекте размещены бесплатные уроки и статьи по различным темам. Темы очень разнообразны, начиная от простой установки Windows и заканчивая разработкой сайтов.
Шаг 3. Стили
Теперь начинаем писать стили для нашего окна. В этом шаге мы сделаем невидимым наше окно. Оно будет появляться только по нажатию на ссылку. Для этого пишем стили для нашего класса modalDialog :
ModalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; }
Шаг 4. Функционал и просмотр
В этом шаге мы сделаем так, чтобы наше окно уже начало функционировать. Для этого добавим еще несколько стилей для нашего класса modalDialog :
ModalDialog:target { opacity:1; pointer-events: auto; display: block; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #b8ecfb); background: -webkit-linear-gradient(#fff, #b8ecfb); background: -o-linear-gradient(#fff, #b8ecfb); }
На этом шаге вы уже можете просмотреть ваше окно, оно уже функционирует. Но, кнопка close выглядет не очень красиво.
Теперь нам нужно дописать стили для нашего класса close .
Шаг 5. Делаем кнопку close
В этом шаге мы улучшим внешний вид нашей кнопки, которая будет закрывать наше окно. Для этого пишем стили для нашего класса close :
Close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover {background: #860015;}
Ну теперь наша кнопка выглядет так, как и задумывалось. У вас она должна выглядеть также:
На этом данный урок закончен. Спасибо за внимание! Для вашего удобства я добавил демо-версию и исходные файлы. Если, что то не понятно, то скачайте исходные файлы.
В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования javascript, плагинов jQuery и т.д. Больший интерес вызывает возможность применения чистых стилей и неисчерпаемого потенциала новых функций CSS3.
Основываясь на разработках некоторых уважаемых буржуинов, они в этом плане ребята ушлые, получаются неплохие результаты, в плане создания модальных окон с помощью CSS3. Задача, в первую очередь состоит в том, чтобы добиться более-менее устойчивой кросбраузерности конечного результата, ну и конечно же, с наименьшими потерями, уменьшить общее количество кода, как в HTML так и в CSS, дабы облегчить жизнь многострадальным труженикам сайтостроения.
Что получается в итоге, у меня в этом плане на сегодняшний день, мы с вами и посмотрим, а заодно, и научимся делать всплывающие модальные окна с помощью «магии» CSS3.
Для начала, все те кого заинтересовала эта тема, можете взглянуть на пример работы модальных окон в различных вариантах и скачать исходники:
Не стоит воспринимать данный урок, как руководство к действию, так как на этом этапе удалось добиться уверенной поддержки лишь современными браузерами (IE 9+, Firefox, Safari, Opera, Chrome ). С оглядкой на то, что древние версии браузера IE еще достаточно популярены среди пользователей, рекомендую рассматривать эту статью в виде некоего эксперимента, демонстрации возможностей CSS3.
Хорошо, теперь перейдем непосредственно к самой раскладке html кода и стилевого формирования нашего модального окна с помощью css3)))
Шаг 1. HTMLВо-первых, давайте создадим основную разметку HTML. Как вы можете видеть, базовая конструкция довольно простая, если рассматривать именно html-разметку модальных окон и кнопок(ссылок), для их активации. Каждое модальное окошко, представляет из себя ничто иное, как стандартный контейнер , с определенным содержание внутри и кнопкой «Закрыть», сформированной исключительно средствами css.
Открыть окно 1
Открыть окно 2
Видео в окне 3
Фото в окне 4
Здесь вы можете разместить любое содержание,
текст с картинками или видео!
Заголовок
Здесь вставляете видео своё или с любого стороннего ресурса,
YouTube, Vimeo и т.д.(iframe, embed)...
В вышеприведенном примере кода, для наглядности, в контейнерах модальных окон прописал краткие пояснения. Вам остается по аналогии, в div-контейнер всплывающего окна, поместить любое свое содержание, будь то простой текст, картинки или видео с любого стороннего ресурса, YouTube, Vimeo и т.д. Ссылки на вызов модальных окон, можете сделать текстовыми, или же оформить их в виде замечательных, градиентных кнопок, как в примере.
Шаг 2. CSSСледующий шаг, это самое интересное, важно подготовить все необходимые стили, для нашего модального окошка, оформить внешний вид и добавить функционала. Базовые стили страницы я опустил, чтобы не вносить сумятицу, а некоторые правила, для большей ясности, разбавил комментариями:
/* Базовые стили слоя затемнения и модального окна */ .overlay { top: 0; right: 0; bottom: 0; left: 0; z-index: 1; visibility: hidden; /* фон затемнения */ background-color: rgba(0, 0, 0, 0.7); opacity: 0; position: fixed; /* фиксированное поцизионирование */ cursor: default; /* тип курсара */ -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .overlay:target { visibility: visible; opacity: 1; } .is-image { top: 0; right: 0; bottom: 0; left: 0; display:block; margin: auto; width: 100%; height: auto; /* скругление углов встроенных картинок */ -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } /* встроенные элементы м-медиа, фреймы */ embed, iframe { top: 0; right: 0; bottom: 0; left: 0; display:block; margin: auto; min-width: 320px; max-width: 600px; width: 100%; } .popup h1 { /* заголовок 1 */ color: #008000; text-align: left; text-shadow: 0 1px 3px rgba(0,0,0,.3); font:24px "Trebuchet MS", Helvetica, sans-serif; font-weight: bold; } .popup h2 { /* заголовок 2 */ color: #008000; text-align: left; text-shadow: 0 1px 3px rgba(0,0,0,.3); font:22px "Trebuchet MS", Helvetica, sans-serif; } /*** Формируем стили модального окна ***/ .popup { top: 0; right: 0; left: 0; font-size: 14px; z-index: 10; display: block; visibility: hidden; margin: 0 auto; width: 90%; min-width: 320px; max-width: 600px; /* фиксированное позиционирование, окно стабильно при прокрутке */ position: fixed; padding: 15px; border: 1px solid #383838; /* скругление углов */ -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; /* внешняя тень блока */ -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); -ms-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); -o-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8); /* полная прозрачность окна, появление при клике */ opacity: 0; /* эффект перехода (появление) */ -webkit-transition: all ease .5s; -moz-transition: all ease .5s; -ms-transition: all ease .5s; -o-transition: all ease .5s; transition: all ease .5s; } /* активируем появление окна и затемнение фона */ .overlay:target+.popup { top: 20%; /* положение окна от верха страницы при появлении */ visibility: visible; opacity: 1; /* убираем прозрачность */ } /* формируем кнопку закрытия */ .close { position: absolute; top: -10px; right: -10px;padding: 0; width: 20px; height: 20px; 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-weight: bold; line-height: 20px; /* задаём значения и эффект перехода при наведении */ -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 p, .popup div { margin-bottom: 10px; }
Как видите, дорогие друзья, все довольно таки просто и никакой лишней мешанины. Если все проделаете правильно, то получите в свой арсенал, замечательное модальное всплывающее окно, в котором сможете разместить любой контент, будь то текстовое содержание, фотографии, различные формы регистрации и обратной связи, или же видео из любого стороннего источника. Экспериментируйте с параметрами, видоизменяйте окно, как вашей душе угодно, и по возможности делитесь своими наработками, а так же возникшими вдруг проблемами, в комментариях.
Модальное окно – маленькое окошко, которое всплывает, чтобы сказать о чем то важном. Сложно ли сделать модальное окно без Bootstrap? Попробуем разобраться.
Куда вставить в DOM?Обычно, я помещаю его перед закрывающим тэгом body.
В основном по причине стилей. Намного легче позиционировать модальное окно на CSS, когда вы имеете дело со слоем обертывающим весь body, чем с неизвестным набором родительских элементов, у которого потенциально может быть свое позиционирование.
ЦентрированиеВот один из моих любимых трюков, когда вы можете отцентровать и вертикально и горизонтально, без знания высоты и ширины.
Modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Это очень удобно так как, открытое модальное окно обычно должно находится прямо по центру, несмотря на ширину. Высота, тем более скорее всего изменится, так как она зависит от контента внутри.
Position – fixed?Обратите внимание мы использовали position: fixed; чтобы пользователи могли иметь возможность скроллить вниз, в то время как открытое модальное окно оставалась всегда посередине. Я считаю, в целом, что значение fixed уже можно смело использовать, даже на мобильных устройствах. Однако, если вам нужно учесть старые телефоны, попробуйте заменить значением absolute.
Разберемся с ширинойНа больших экранах, типичное открытое модальное окно не только отцентровано, но и ограниченно по ширине.
Modal { width: 600px; }
Однако, есть такие экраны, которые меньше 600px в ширину. Чтобы исправить ситуацию добавим максимальную ширину.
Modal { width: 600px; max-width: 100%; }
ВысотаЗадавать высотку еще более ответственное занятие. Мы знаем, что контент имеет свойство меняться. Плюс, техника центрирования через transform радостно обрезает края, без появления скролл-бара. Установка максимальной высоты обезопасит нас второй раз.
Modal { height: 400px; max-height: 100%; }
OverflowПосле того как мы разобрались с высотой, пришло время заняться свойством overflow. Распространенно использовать overflow значение, прямо в.modal, однако, есть две проблемы с этим:
- Мы можем захотеть использовать элементы, которые не должны скролиться
- Overflow обрежет тень, которую мы будем использовать.
Я бы предложил использовать внутренний контейнер:
Учитывая, что у нас будет контент который нужно скролить, нам нужно задать высоту. Есть несколько вариантов. Вот один из них:
Modal-guts { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* отступы */ padding: 20px 50px 20px 20px; /* разрешим скролить */ overflow: auto; }
КнопкиИдея использования модальных окон в том, чтобы принудить выполнить какое-либо действие, перед тем, как что-нибудь будет сделано. Сделать кнопку закрытия окна видной в любом состоянии кажется не плохой идеей.
Закрыть
Разберемся с затемнениемОбычное модальное окно делают с полностью затемняющимся фоном. Это полезно по нескольким причинам:
- оно может затемнить остальной экран
- может предотвратить клики/взаимодействие с контентом вокруг модального окна
- может использоваться, как гигантская кнопка закрытия
Типичный пример использования:
.modal { /* все что мы уже выше описали */ z-index: 1010; } .modal-overlay { z-index: 1000; position: fixed; top:0; left:0; width: 100%; height: 100%; }
Закрывать классом, а не открывать классомЯ заметил распространенное явление, когда по умолчанию .modal класс скрыт, как например display: none; Потом, чтобы открыть, добавляют класс .modal.open {display: block;}
Однако, это может быть и плохо, потому что ваша модальное окно может быть display: flex; и display: block; его перепишет.
Modal { .display: flex; } .modal.closed { display: none; }
Добавим JavaScript var modal = document.querySelector("#modal"), modalOverlay = document.querySelector("#modal-overlay"), closeButton = document.querySelector("#close-button"), openButton = document.querySelector("#open-button"); closeButton.addEventListner("click", function(){ modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); }); openButton.addEventListner("click", function(){ modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); });Довольно часто на сайтах можно повстречать модальные окна, и все они используются для разных задач. В самом деле, это довольно мощное средство, которое позволяет сделать интерфейс сайта более интерактивным и удобным. К примеру, модальные окна могут быть использованы для различных форм, таких как форма авторизации, форма обратной связи, оформление заказа товара, да и мало ли.
В данном посту мы рассмотрим пример, как сделать модальное простое окно с помощью JQuery и CSS. Особенность данного примера в том, что тут не требуется , ну за исключением самой библиотеки JQuery.
Размещаем код модального окна на странице:
закрыть Открыть модальное окно
Как видно из разметки, блок самого модального окна это div c атрибутом id=modal_form , который содержит элемент span c id=modal_close . Этот элемент будет служить кнопкой для закрытия модального окна, кроме того, ниже блока расположен блок div с атрибутом id=overlay , который служит одновременно и для затемнения фона. Модальное окно будет открываться по ссылке, с классом modal .
CSS для модального окна
#modal_form { width: 300px; height: 300px; border-radius: 5px; border: 3px #000 solid; background: #fff; position: fixed; top: 45%; left: 50%; margin-top: -150px; margin-left: -150px; display: none; opacity: 0; z-index: 5; padding: 20px 10px; } #modal_form #modal_close { width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; } #overlay { z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80); width:100%; height:100%; top:0; left:0; cursor:pointer; display:none; }
Для modal_form мы задали фиксированную ширину и высоту, а затем отцентрировали положение по центру экрана. Для подложки модального окна (overlay ) мы задаем размер по ширине экрана, заливку с прозрачностью, а так же прячем её по умолчанию. Особый момент с z-index , у модального окна он должен быть наибольшим из всех элементов на странице, а у обложки должен быть больше всех элементов, кроме самого модального окна.
Теперь к самому основному, это код на javascript. Для модального окна будет использоваться два основных события, это его открытие — клик по элементу с классом modal , в нашем случае это ссылка, и закрытие модального окна, это клик по обложке (overlay ), либо клик на кнопку закрыть, в нашем случае это элемент span с id=modal_close .
$(document).ready(function() { $(".modal").click(function(event){ event.preventDefault(); $("#overlay").fadeIn(400, // анимируем показ обложки function(){ // далее показываем мод. окно $("#modal_form") .css("display", "block") .animate({opacity: 1, top: "50%"}, 200); }); }); // закрытие модального окна $("#modal_close, #overlay").click(function(){ $("#modal_form") .animate({opacity: 0, top: "45%"}, 200, // уменьшаем прозрачность function(){ // пoсле aнимaции $(this).css("display", "none"); // скрываем окно $("#overlay").fadeOut(400); // скрывaем пoдлoжку }); }); });
Посредством animate мы меняем позицию по вертикали top , а так же прозрачность opacity , и с помощью этого получаем интересный эффект. Подобный эффект используется как при открытии окна, так и при его закрытии. Отличие в том, что меняется порядок применения свойств для блоков, тем самым визуализируя открытие и закрытие окна.
Модальное, либо всплывающее окно (называют по-разному) – это очень распространённый применяемый на веб-сайте. Основное его назначение это вывод различной информации (в основном текстовой и при наличие нескольких картинок), которая появляется при нажатие на какой-либо специальный объект (ссылка, кнопка или фото).
В модальное окно, в большинстве случаев для экономии места на сайте, прописывают не особо важную информацию, например как: обратная связь, авторизация, либо .
Бывают случаи, когда веб-мастера желают привлечь внимание посетителя каким-то важным событием, к примеру: для получения бонусов и подарков, участие в акциях и розыгрышах, и т.п., и модальные окна всплывают без участия и желания посетителя.
Кто-то делает для этих целей модальное окно при открытии страницы, которое появляется на странице через определенный промежуток времени используя разумеется java скрипт, а другой хочет разными способами оставить посетителя на своём сайте и использует модальное окно при закрытии страницы, которое всплывает в тот момент, когда клиент хочет уже покинуть и закрыть страницу.
Первый пример всплывающего модального окна.
Для того, чтобы сделать модальное окно применяя только css, необходимо прописать html код для ссылающего объекта на всплывающее окно и в стилевом файле назначить параметры и свойства для правильного отображения красивого модального окна.
.my_modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.5);z-index:1050;display:none;margin:0;padding:0;}.my_modal:target{display:block;overflow-y:auto;}.my_modal-dialog{position:relative;width:auto;margin:10px;}@media (min-width:576px){.my_modal-dialog{max-width:460px;margin:30px auto;}}.my_modal-content{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;}@media (min-width:768px){.my_modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5);}}.my_modal-header{display:block;padding:14px 14px 4px;}.my_modal-title{margin-top:0;margin-bottom:0;line-height:1.5;font-size:1.25rem;font-weight:500;border-bottom:1px solid #d4d4d4;}.close{padding:1px 5px 0;border:1px solid #000;border-radius:50%;font-family:sans-serif;font-size:24px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;text-decoration:none;top:4px;right:4px;position:absolute;}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.75;}.my_modal-body{position:relative;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:15px;overflow:auto;} Открыть модальное окноЗаголовок модального окна
×Здесь прописана текстовая информация модального окна...
Скопируйте, вставьте и сохраните вышеуказанный код в текстовый документ под именем index.html и после откройте его в браузере для проверки работоспособности модального окна. Здесь же вы можете и подкорректировать внешний вид модального окна исходя из дизайна вашего проекта.
Я к примеру, для вывода определённой информации частенько использую модальное окно в качестве с различными анимационными эффектами, что смотрится куда-более интересным.
Модальное окно при нажатии на кнопкуВ этом примере я покажу как прописать кнопку для открытия модального окна.
Для этого нам нужно лишь добавить в коде для кнопки и для блока модального окна атрибут HTML onclick
и тем самым вызвать функцию с определённым именем.
Пример кнопки для вызова модального окна (нажмите).
Модальное окно кнопка
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 999; overflow: auto; visibility:hidden; opacity: 0; transition: opacity 0.7s ease-in 0s; } .popup { top: 10%; left: 0; right: 0; font-size: 14px; margin: auto; width: 80%; min-width: 200px; max-width: 600px; position: absolute; padding: 15px 20px; border: 1px solid #666; background-color: #fefefe; z-index: 1000; border-radius: 10px; font: 14px/18px "Tahoma", Arial, sans-serif; box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4); } .close { top: 10px; right: 10px; width: 32px; height: 32px; position: absolute; border: none; border-radius: 50%; background-color: rgba(0, 130, 230, 0.9); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); cursor: pointer; outline: none; } .close:before { color: rgba(255, 255, 255, 0.9); content: "X"; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); } .close:hover { background-color: rgba(180, 20, 14, 0.8); } #overlay .popup p.zag{margin:20px 0 10px;padding:0 0 6px;color:tomato;font-size:16px;font-weight:bold;border-bottom:1px solid tomato;}
Потом скопируйте и вставьте html код модального окна:
Модальное окно
Первая текстовая информация...
Вторая текстовая информация...
Последующая текстовая информация...
Модальное окноИ последнее, пропишите перед скрипт для вызова и закрытия модального окна:
var b = document.getElementById("overlay"); function swa(){ b.style.visibility = "visible"; b.style.opacity = "1"; b.style.transition = "all 0.7s ease-out 0s"; } function swa2(){ b.style.visibility = "hidden"; b.style.opacity = "0"; }Делитесь с друзьями и задавайте вопросы, если что-то не получается при создание модального окна.
