Простое popup окно css. Модальное окно на css, как сделать модальное окно. А может и это вам будет интересно
В данном уроке я не открою тайну для матерых верстальщиков и гуру css, но данная статья будет полезна начинающим. именно здесь вы сможете узнать, как создавать всплывающие окна поверх всего сайта.Чаще всего такие окна появляются после совершения определенных действий на сайте, например, пользователь нажимает на ссылку «Заказать обратный звонок» и перед ним всплывает форма заказа.
Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.
Всё больше и больше в сети начинает появляться веб-ресурсов, которые используют всплывающие окна PopUp. В пример можно привести всем знакомые социальные сети. Все лишние данные со скриншотов удалены.
Twitter
Думаю достаточно доводов, чтобы начать изучать вопрос: как же сделать на своем сайте всплывающее окно PopUp.
Постановка задачи(ТЗ) Необходимо создать поверх всего сайта всплывающее окно с затемнением экрана.РешениеСпособ 1html Sample Text Text in Popup css *{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; height: 2000px; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; } Результат:
Очень часто предлагают использовать:
Position:absolute;
Да, результат получается аналогичный, но из-за того, что у нас задана высота блока «затемнения», появляются полосы прокрутки. Именно поэтому такой метод не подходит.
Единственным минусом данного способа является то, что Internet Explorer поддерживает данное свойство только с версии 8.0.
Добавление магии на Jquery Теперь добавим ссылки для скрытия/отображение нашего всплывающего окна.Для этого необходимо подключить библиотеку JQuery и небольшой скрипт:
$(document).ready(function(){
//Скрыть PopUp при загрузке страницы
PopUpHide();
});
//Функция отображения PopUp
function PopUpShow(){
$("#popup1").show();
}
//Функция скрытия PopUp
function PopUpHide(){
$("#popup1").hide();
}
Также необходимо обновить Html:
Sample Text Show popup Text in Popup Hide popup
Результат Теперь при загрузке страницы всплывающее окно PopUp скроется.Результат можно посмотреть тут.
Для вывода важных сообщений или просто изменений, произведённых на сайте, можно использовать всплывающие окна. Всплывающие окна бывают двух видов: обычные и модальные.
Примечание: модальные окна отличаются от обычных тем, что пока модальное окно открыто пользователь не может взаимодействовать с другими элементами сайта до тех пор, пока не закроет модальное окно.
Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert() .
Всплывающее окноПервым шагом создания всплывающего окна является создание элемента (или любого другого элемента) и его оформление:
Название документа .okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; } Всплывающее окошко! Попробовать »
Этот и будет использоваться в качестве всплывающего окна. Теперь мы его скрываем с помощью значения none свойства display и добавляем ссылку, при нажатии на которую будет появляться всплывающее окно:
Название документа #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; } #okno:target {display: block;} Всплывающее окошко! Вызвать всплывающее окно Попробовать »
Используя псевдо-класс:target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента сменится с none на block .
Теперь надо расположить посередине страницы, чтобы он стал похож на всплывающее окно. Делаем его абсолютно позиционированным и центрируем его по вертикали и горизонтали:
#okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; /*позиционируем и центрируем*/ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент внутри элемента :
Затем мы позиционируем элемент и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем нашу ссылку на него:
Название документа #main { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #main:target {display: block;} Всплывающее окошко! Вызвать всплывающее окно Попробовать »
У элемента убираем display: none; (он больше не нужен, так как скрываем мы теперь ). В итоге родительский выполняет теперь скрытие всплывающего окна, перенаправляя выбор на страницу.
На этом создание простого всплывающего окна закончено.
Модальное окноДля создания всплывающего модального окна, берём элемент , оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:
Название документа #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #okno:target {display: block;} Всплывающее окошко! Вызвать всплывающее окно
Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему и оформив:
Название документа
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#okno:target {display: block;}
.close {
display: inline-block;
border: 1px solid #0000cc;
color: #0000cc;
padding: 0 12px;
margin: 10px;
text-decoration: none;
background: #f2f2f2;
font-size: 14pt;
cursor:pointer;
}
.close:hover {background: #e6e6ff;}
Всплывающее окошко!
Закрыть окно
Вызвать всплывающее окно
Попробовать »
Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный :
Всплывающее окошко!
Закрыть окно
Позиционируем родительский и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем ссылку вызова окна на него.
У дочернего убираем display: none; (он больше не нужен, так как родительский будет скрывать всё, что находится внутри него). В итоге родительский теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:
Название документа
#zatemnenie {
background: rgba(102, 102, 102, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #fff;
}
#zatemnenie:target {display: block;}
.close {
display: inline-block;
border: 1px solid #0000cc;
color: #0000cc;
padding: 0 12px;
margin: 10px;
text-decoration: none;
background: #f2f2f2;
font-size: 14pt;
cursor:pointer;
}
.close:hover {background: #e6e6ff;}
Всплывающее окошко!
Закрыть окно
Вызвать всплывающее окно
Попробовать »
Примечание: если вам нужно, чтобы при заходе на страницу пользователь сразу видел всплывающее окно (а не вызывал его по ссылке), то адрес страницы надо будет прописывать вместе с id окна (например адрес может выглядеть так: site.ru/papka/documet.html#okno).
В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования 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; }
Как видите, дорогие друзья, все довольно таки просто и никакой лишней мешанины. Если все проделаете правильно, то получите в свой арсенал, замечательное модальное всплывающее окно, в котором сможете разместить любой контент, будь то текстовое содержание, фотографии, различные формы регистрации и обратной связи, или же видео из любого стороннего источника. Экспериментируйте с параметрами, видоизменяйте окно, как вашей душе угодно, и по возможности делитесь своими наработками, а так же возникшими вдруг проблемами, в комментариях.
Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются popup-окна.
О создании всплывающих (модальных) окон в WordPress, мы говорили .
В данном примере модальные окна появляются при клике на кнопку (текст) и исчезают при нажатии в любую область мимо модального окна, или при клике на ключевое слово.
Изменяя значения в скрипте fadeIn вы можете увеличить или уменьшить скорость открытия всплывающего модального окна, а fadeOut — увеличить или уменьшить скорость закрытия .
Для работы необходимо обязательно подключить библиотеку jQuery .
Посмотреть и скачать демо пример вы можете ниже.
Если у вас есть вопросы, задавайте в комментариях.
HTML Нажми на меня! И на меня тоже... Заглавие первого модального окна!Ты действительно любишь васаби?
НЕТ Заглавие второго модального окна!
Небо синее?
ДА Wordpress-club.com CSS .fond { position:absolute; padding-top:45px; top:0; left:0; right:0; bottom:0; background-color:#f8b334; } .mymagicoverbox { display:inline-block; color:#ffffff; padding:10px; margin:10px; cursor:pointer; font-weight:300; font-family:"Roboto"; } .mymagicoverbox_fenetre { z-index:9999; position:fixed; margin-left:50%; top:100px; text-align:center; display:none; padding:5px; background-color:#ffffff; color:#97BF0D; font-style:normal; font-size:20px; font-weight:300; font-family:"Roboto"; } .mymagicoverbox_fenetreinterieur { text-align:center; overflow:auto; padding:10px; background-color:#ffffff; color:#666666; font-weight:400; font-family:"Roboto"; font-size:17px; border-top:1px solid #e7e7e7; margin-top:10px } .mymagicoverbox_fermer { color:#CB2025; cursor:pointer; font-weight:400; font-size:14px; font-style:normal font-family:"Roboto"; } #myfond_gris { display: none; background-color:#000000; opacity:0.7; width:100%; height:100%; z-index:9998; position:fixed; top:0; bottom:0; right:0; left:0; } JS $(document).ready(function(){ $(".mymagicoverbox").click(function() { $("#myfond_gris").fadeIn(300); var iddiv = $(this).attr("iddiv"); $("#"+iddiv).fadeIn(300); $("#myfond_gris").attr("opendiv",iddiv); return false; }); $("#myfond_gris, .mymagicoverbox_fermer").click(function() { var iddiv = $("#myfond_gris").attr("opendiv"); $("#myfond_gris").fadeOut(300); $("#"+iddiv).fadeOut(300); }); });
Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются popup-окна. О создании всплывающих (модальных) окон в WordPress, мы говорили в отдельном уроке. В данном примере модальные окна появляются при клике на кнопку (текст) и исчезают при нажатии в любую область мимо модального окна, или при клике на ключевое слово. Изменяя значения в скрипте fadeIn вы можете увеличить или уменьшить скорость открытия всплывающего модального окна, а fadeOut - увеличить или уменьшить скорость закрытия. Для работы необходимо обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете ниже. Если у вас есть вопросы, задавайте в комментариях. HTML < a href= "#win5" >< img title= "" src= "img/realism_lrg.jpg" width= "150" height= "150" alt= "" /> < a href= "#x" class = "overlay" id= "win1" > < div class = "popup" > < a class = "close" title= "Закрыть" href= "#close" > < a href= "#x" class = "overlay" id= "win2" > < div class = "popup" > Здесь вы можете разместить любое содержание, текст с картинками или видео! < a class = "close" title= "Закрыть" href= "#close" > < a href= "#x" class = "overlay" id= "win3" > < div class = "popup" > < h2> Заголовок Здесь вставляете видео своё или с любого стороннего ресурса, YouTube, Vimeo и т. д. (iframe, embed) ... < a class = "close" title= "Закрыть" href= "page.html" onclick= "return false" > < a href= "#x" class = "overlay" id= "win4" > < div class = "popup" > < img class = "is-image" src= "ваша-картинка.jpg" alt= "" /> < a class = "close" title= "Закрыть" href= "#close" > < a href= "#x" class = "overlay" id= "win5" > < div class = "popup" > < img class = "is-image" src= "ваша-картинка.jpg" alt= "" /> < a class = "close" title= "Закрыть" href= "#close" >
Открыть окно 1
Открыть окно 2
Видео в окне 3
Фото в окне 4
Здесь вы можете разместить любое содержание, текст с картинками или видео!
Заголовок
Здесь вставляете видео своё или с любого стороннего ресурса, YouTube, Vimeo и т.д.(iframe, embed)...
В вышеприведенном примере кода, для наглядности, в контейнерах модальных окон прописал краткие пояснения. Вам остается по аналогии, в div-контейнер
всплывающего окна, поместить любое свое содержание, будь то простой текст, картинки или видео с любого стороннего ресурса, YouTube, Vimeo и т.д. Ссылки на вызов модальных окон, можете сделать текстовыми, или же оформить их в виде , как в примере.
Следующий шаг, это самое интересное, важно подготовить все необходимые стили, для нашего модального окошка, оформить внешний вид и добавить функционала. Базовые стили страницы я опустил, чтобы не вносить сумятицу, а некоторые правила, для большей ясности, разбавил комментариями:
| /* Базовые стили слоя затемнения и модального окна */ . 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 } |
/* Базовые стили слоя затемнения и модального окна */ .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 , для кнопки закрытия окна, указав в ссылке адрес демо-страницы, т.е. страницы, на которой расположено окно с видео:
Можно просто использовать ссылку с пустым атрибутом href="" , в обоих случаях происходит перезагрузка страницы и соответственно закрывается, и окно, и останавливается видео, костыль ещё тот конечно, но другого более действенного и валидного решения, без подключения javascript, на данный момент у меня нет.
| < script type= "text/javascript" src= "http://www.youtube.com/player_api" > |
С помощью API JavaScript, вы сможете управлять проигрывателем Chromeless Player и встроенным проигрывателем YouTube с помощью javaScript кода. Для нашего модального блока с встроенным видео, исполняемый js будет таким:
| < script> var player; function onYouTubePlayerAPIReady() { player = new YT. Player("player" ) ; } $("#stop" ) . click(function () { player. stopVideo() } ) |
var player; function onYouTubePlayerAPIReady() { player = new YT.Player("player"); } $("#stop").click(function(){ player.stopVideo() })
При клике по кнопке с id="stop" будет вызвана функция , окно закроется и воспроизведение видео остановится.
Однако следует понимать, что для других видео-сервисов и танцы с бубнами будут другими))). Хотя всегда есть выбор — это использовать готовые специализированные плагины.
Веб-дизайнеры и предприниматели, которые живут в русскоговорящих странах, наверняка хотят иметь возможность пользоваться не только англоязычными шаблонами. Они также хотят иметь доступ к коллекциям русскоязычных готовых решений. Поэтому хотим обратить ваше внимание на новейший раздел , который теперь представлен на маркетплейсе TemplateMonster. Стоит упомянуть о том, что текст для каждого из шаблонов был написан вручную. К тому же, вам не нужно обладать какими-то сверхъестественными знаниями в сфере программирования, чтобы создать впечатляющий онлайн-проект.
С Уважением, Андрей
