Модальные окна примеры html css. Как сделать модальное окно на css

Popup {
left : 50% ;
top : 50% ;
width : 400px ;
height : 200px ;
margin-left : -200px ;
margin-top : -100px
}

Отрицательные margin"ы в половину ширины и высоты - банально и скучно, ничего оригинального в этом нет. Идём дальше.

Popup {
margin : auto
}

На вертикальное выравнивание это никак не повлияет, и, к слову, если вам достаточно лишь горизонтального выравнивания, то на этом можно и остановиться, указав еще какой-нибудь верхний отступ попапа. Но нам этого мало! Идём дальше.

Вертикальное выравнивание. Здесь уже становится интересно. С такой задачей, конечно, без проблем справилась бы таблица или эмуляция таблицы с помощью display: table & display: table-cell, но заставить такое работать в старых IE - себе дороже. Таблица также отпадает - по понятным причинам.

Итак, margin уже отпадает - размеров мы не знаем. Вспоминаем, что же есть из свойств с подобными эффектами. Ага, text-align. Но только для инлайновых элементов. ОК. Кажется, сам Бог велел использовать display: inline-block - блочный элемент, к которому можно было бы применить свойства для инлайновых элементов. С поддержкой этого свойства у всех браузеров тоже всё, можно сказать, в порядке. Код становится примерно таким:

Popup__overlay {
position : fixed ;
left : 0 ;
top : 0 ;
width : 100% ;
height : 100% ;
z-index : 999 ;
text-align : center
}
.popup {
display : inline -block ;
vertical-align : middle
}

Остаётся вертикальное выравнивание - нам подойдёт vertical-align. В любой другой ситуации было бы также уместно использовать line-height, но поскольку у нас нет фиксированной высоты страницы (line-height в данном контексте), здесь использовать её нельзя. На помощь приходит один трюк с вертикальным выравниванием элементов неизвестных размеров. Я точно помню, что нашел этот способ на Хабре, но, к сожалению, не смог найти ссылку на тот топик. Заключается этот способ в следующем: добавляется inline-block элемент нулевой ширины и 100%-ой высоты родителя, который «расхлопывает» высоту строки до 100% высоты родителя, то есть до высоты рабочей области страницы. Сделаем это изящнее - вместо лишней разметки воспользуемся псевдоэлементами:

Popup__overlay :after {
display : inline -block ;
width : 0 ;
height : 100% ;
vertical-align : middle ;
content : ""
}

Осталось добавить полупрозрачное затемнение оверлея - с этим справится rgba. Всё! Теперь положение попапа регулируется только средствами браузера на уровне CSS.

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

В данном посту мы рассмотрим пример, как сделать модальное простое окно с помощью 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 , и с помощью этого получаем интересный эффект. Подобный эффект используется как при открытии окна, так и при его закрытии. Отличие в том, что меняется порядок применения свойств для блоков, тем самым визуализируя открытие и закрытие окна.

Модальное окно - это контейнер, который при нажатии ссылки всплывает и предоставляет какую-либо информацию. Думаю многие уже знакомы с ним, ну если же нет посмотрите демо версию, чтобы понять что это такое. Сейчас их насчитывается огромное множество и каждый работает по своему. Например, есть совершенно стандартные , которые запрашивают выполнить какое то действие, в данном примере подтверждения. Или например, другой вариант, при первом заходе на сайт, которое актуально будет подходить под различные подписки на группы в социальных сетях. Есть модальные окна на чистом CSS , ну мне хотелось бы отвести эту долю JavaScript , так как на нем это более интереснее получается и не плохо работает во всех браузерах.

ШАГ ПЕРВЫЙ. Код JavaScript.

Чтобы запустить модальное окно, нужно передать функции значение window.onload . В котором мы будем передавать два элемента идентификатора "a " и "b ".

//передача элементов по id "a" и "b" window.onload = function() { a = document.getElementById("a"); b = document.getElementById("b"); }

Затем мы прописываем функцию "showA ", которая будет показывать модальное окно и передавать элементам "a " и "b " стили, а именно мы задали прозрачность, ширину и блокировку окна, если не была нажата ссылка "открыть ".

//показываем окно функции "showA" function showA() { //Задаем прозрачность и блокируем дисплей //элемента "b" b.style.filter = "alpha(opacity=80)"; b.style.opacity = 0.8; b.style.display = "block"; // Задаем блокироваку и отступ сверху в 200px //элемента "a" a.style.display = "block"; a.style.top = "200px"; }

После открытия модального окна, нам нужно как то его потом закрыть или скрыть, для этого прописываем функцию "hideA ", которая будет скрывать модальное окно и прописываем ей стили для элементов "a " и "b ".

//Вызываем функцию "hideA", которая будет скрывать //окно для элементов "a" и "b" function hideA() { b.style.display = "none"; a.style.display = "none"; }

Полный код.

//передача элементов по id "a" и "b" window.onload = function() { a = document.getElementById("a"); b = document.getElementById("b"); } //показываем окно функции "showA" function showA() { //Задаем прозрачность и блокируем дисплей //элемента "b" b.style.filter = "alpha(opacity=80)"; b.style.opacity = 0.8; b.style.display = "block"; // Задаем блокироваку и отступ сверху в 200px //элемента "a" a.style.display = "block"; a.style.top = "200px"; } //Вызываем функцию "hideA", которая будет скрывать //окно для элементов "a" и "b" function hideA() { b.style.display = "none"; a.style.display = "none"; }

ШАГ ВТОРОЙ. Код HTML.

Открыть

В теге "div" указываем идентификатор "a ", который будет взаимодействовать со стилями CSS и с кодом JavaScript . Далее прописываем еще один тег "div " и придаем ему идентификатор "windows ", который будет выполнять роль разметки внутри контейнера модального окна.

Внутри указываем ссылку, которая будет "закрывать " модальное окно, также придаем ей стиль "pages " и по умолчанию задаем ей стиль "float: right ", то есть будем отображать ссылку закрытия модального окна в верхнем правом углу.

Закрыть

Прописываем идентификатор "b ", который будет скрывать окно.

Полный код.

Открыть Закрыть

ШАГ ТРЕТИЙ. Код CSS.

Обязательные стили CSS , без которых модальное окно будет не правильно работать, а точнее вообще некорректно работать и отображать информацию.

И так первый обязательный стиль, касающийся позиции, в данном примере это fixed . Он позволяет отображать модальное окно, при этом ограничивая его с границей заливки. С помощью z-index мы указываем насколько модальное окно идентифицируется после нажатии ссылки "открыть ", а также "закрыть ". Также display: none , который позволяет скрывать модальное окно до нажатия ссылки.

#b { position:fixed; top:0; left:0; right:0; bottom:0; display:none; background: grey; z-index:1; } #a { border:1px solid black; position:fixed; background: #eff7ff; z-index:3; display:none; } #windows { padding:5px; width: 500px; height: 300px; border: 2px solid blue; } a.pages { background: #97cdff; color: white; padding: 4px; text-decoration: none; } a:hover.pages { background: red; color: white; padding: 4px; text-decoration: none; }

Всем огромное спасибо за Ваше внимание!

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

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

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

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

Первое что нам нужно это стили, копируем полностью код со стилями, который ниже и вставляем его в ваш основной файл стилей, то-есть в style.css

Window { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; } .Window:target { display: block; pointer-events: auto; } .Window > div { width: 460px; position: relative; margin: 10% auto; padding: 30px 10px 10px; border-radius: 10px; background: #fff; box-shadow: 0px 0px 20px 2px; } .close { background: #cc3300; 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: #990000; }

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

Кнопка X Здесь будет содержимое окна

Теперь немного разберем что в нем, нужно вам поменять. Где прописано «Кнопка» там вы можете вставить, как картинку таи текст, вообще что хотите, то-есть при нажатии на её, будет открываться окно. Там где прописано «Здесь будет содержимое окна» вставьте то что вы бы хотели видеть в всплывающем окне, вот в принципе и все.

НОВОСТИ!

Ну и на по следок новость как всегда, что-то я зачастил с новостями уже)) Сделал себе небольшую страничку с партнерской программой, в виде , порошу всех перейти на нее и посмотреть, может кто-то даст еще какие-то советы интересные, например что-то дополнить, ну вы понимаете о чем я говорю. Еще есть некоторые мысли по ней, чтоб добавить видео со мной, может инструкцию, ну что-то в этом роде, Вообщем жду от вас комментарий!

Судя по комментариям, тема создания модальных окон довольно популярна. Я не раз уже описывал различные техники исполнения, как с помощью jQuery, так и на чистом CSS. Да и в интернетах, информации по теме предостаточно, и каждый может выбрать для себя оптимальный вариант.
Меня больше интересуют решения без использования javascript, не потому-что у меня какая-то фобия к js, нет, мне просто интересны эксперименты, поиск новых возможностей связки html+css, тем более что в последнее время возможности эти существенно расширились.
Скрытые чебоксы() я пару раз использовал при разработке , почему бы не применить эту же методу и для реализации всплывающих(модальных) окон. Оказывается всё довольно просто, давайте рассмотрим подробнее, как с помощью свойств и новых синтаксических особенностей , можно быстро и без особых сложностей организовать на страницах своих сайтов работу привлекательных модальных окошек.

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

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

На ряду с использованием стандартных html-элементов тегов и , для определения состояния и свойства объектов, применил из состава HTML5-спецификации, в частности атрибут aria-hidden , который показывает состояние «hidden » у текущего элемента, в нашем случае это связка тегов и , определяющие элементы пользовательского интерфейса модальных окон.

Атрибут for это ничто иное как идентификатор элемента, с которым следует установить связь, при использовании на одной странице нескольких модальных окон с различным содержанием, следует помнить о том, что идентификатор должен быть разным, установленным в соответствии с id того или иного мод. окна, for="modal-1" , for="modal-2" и т.д.

Открыть Заголовок ×

Здесь размещаете любое содержание...

Стилистика внешнего вида модального окна напоминает стиль всплывающих окошек из набора элементов 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; }

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

Для примера, использовал немного видоизменённую форму обратной связи, о вёрстке которой . Все элементы формы замечательно подстраиваются под размеры окна при просмотре на различных экранах пользовательских устройств.

/* Элементы формы контактов */ .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, что одновременно является и его единственным недостатком.

Поковыряться в коде можно .
В завершение, ещё раз посмотрите демо и при желании, для более детального разбора, скачивайте исходники, которые я бережно упаковал в архив, и выложил на своём Яндекс.Диске:

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