Модальное окно - это контейнер, который при нажатии ссылки всплывает и предоставляет какую-либо информацию. Думаю многие уже знакомы с ним, ну если же нет посмотрите демо версию, чтобы понять что это такое. Сейчас их насчитывается огромное множество и каждый работает по своему. Например, есть совершенно стандартные , которые запрашивают выполнить какое то действие, в данном примере подтверждения. Или например, другой вариант, при первом заходе на сайт, которое актуально будет подходить под различные подписки на группы в социальных сетях. Есть модальные окна на чистом 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; }
Всем огромное спасибо за Ваше внимание!
1. Модальное окно на jQuery «Simple Modal Box» 2. jQuery плагин «LeanModal»Отображение контента в модальных окнах. Для просмотра плагина в действии на демонстрационной странице нажмите на ссылку: Sign Up Form или Basic Content.
3. jQuery плагин «ToastMessage»Всплывающие сообщения. Плагин в двух вариантах. В одном случае сообщения исчезают самостоятельно, по прошествии определённого времени, во второй реализации для того чтобы закрыть сообщение необходимо нажать на кнопку.
4. Содержимое, всплывающее в модальном окнеПлагин «Reveal». Для просмотра плагина в действии нажмите на кнопку «Fire A Reveal Modal» на демонстрационной странице.
5. Симпатичные диалоговые окнаНажмите на крестик на демонстрационной странице, чтобы посмотреть плагин в действии.
6. Mootools модальное окно, плагин «MooDialog» 7. jQuery всплывающая панель сверху экрана 8. jQuery всплывающее окноjQuery плагин для отображения формы обратной связи во всплывающем окне.
10. MooTools плагин «LightFace» для реализации диалоговых окон FacebookДиалоговые окна в стиле Facebook. Помимо статической информации в окна можно поместить изображения, фреймы, Ajax запросы. Много настроек работы плагина, очень мощный инструмент. Выглядит очень стильно и функционально. Пройдите по ссылкам на демонстрационной странице чтобы посмотреть примеры с различным содержимым.
11. jQuery модальное окноАккуратное всплывающее диалоговое окно на jQuery.
12. Модальные окна jQueryСимпатичные всплывающие модальные окна. Три стилевых оформления. На демонстрационной странице представлено 3 ссылки для вызова окон.
13. Модальные окна jQueryВсплывающие модальные окна нескольких видов. Для просмотра плагина в действии нажмите на ссылку на демонстрационной странице.
15. Всплывающее поверх страницы сообщениеСообщение отображается поверх страницы, которая, в свою очередь, затемняется. Нажмите на надпись «Click me» на демонстрационной странице, чтобы увидеть всплывающее сообщение. Нажатие на крестик его закроет. Реализовано с помощью jQuery.
16. Модальное окно «ModalBox» на javascriptРеализация современных модальных диалоговых окон без использования всплывающих окон и перезагрузок страницы. На демонстрационной странице нажмите на кнопку «Start Demo» чтобы посмотреть на работу скрипта.
17. «Leightbox» плагин с использованием библиотеки PrototypeПлагин для отображения контента в модальных окнах.
Здравствуйте всем. Посмотрел тут на днях внимательно статистику блога и обнаружил, что больший интерес у наших интернет-трудящихся вызывают и примеры по созданию модальных окон. Самыми популярными оказались решения реализации всплывающих окон без использования javascript, исключительно на чистом .
За время работы у меня накопилось немало интересных решений, которые в разное время я детально расписал в развернутых статьях на страницах своего блога, но многие из этих уроков со временем ушли на задний план. Читателям блога иной раз сложно сориентироваться и большая часть работоспособных методов создания эффектных модальных окон и всплывающих форм просто остаются незамеченными.
Поэтому, учитывая интерес пользователей к данному вопросу, решил объединить все уроки и примеры по данной теме и вывести в отдельной статье коллекцию модальных окон и форм. Получился небольшой обзор с кратким описанием, ссылками на примеры и статьи. Так что смотрите, изучайте и если кому-то, какое-либо из решений придётся по душе, смело забирайте исходники, и творите, творите, творите...
Самый популярный, среди читателей моего блога, метод создания модальных окон. Очень прост в реализации. Формирование внешнего вида всплывающих блоков и весь функционал основаны исключительно на CSS3, без подключения в работу Javascript и дополнительных графических элементов.
Возможность подключения и вывода модальных окон практически на любом сайте. Достаточно правильно разместить html-каркас в нужном месте, добавить нужный вам контент, подключить стили, привязать всё это дело к активирующей кнопке или любому другому элементу сайта(картинки, пункты меню, ссылки, отдельное слово в тексте и т.д.) и всё, готово к работе.
Очень простой, лёгкий плагин jQuery, с помощью которого вы сможете быстро и без проблем реализовать у себя на сайте вывод модальных модальных окон с любой информацией, будь то простой текст, картинки, различный формы или встроенное видео.
Внешний вид формируется с помощью CSS, размер окна задается непосредственно в ссылке, в атрибуте href="#?w=500" , где #?w=500 указывает необходимую ширину окна. Впрочем, изучив детали урока, всё станет предельно ясно. Для работы данного решения необходима подключённая к сайту библиотека jQuery.
Изначально урок задумывался именно об абсолютной центрации блочных элементов с содержанием, но об этом столько написано, что решил разбавить тему адаптивностью и наложить всё это на модальное окно, при этом пользуясь исключительно средствами CSS. Что из этого получилось, можете узнать изучив урок.
Довольно свежая метода для реализации всплывающих(модальных) окошек. Скрытые чекбоксы я чаще использовал для создания раскрывающихся информационных блоков или « ». В результате оказалось всё очень даже просто, с помощью CSS3 и синтаксических особенностей HTML5 можно легко организовать работу модальных окон. На оформлении особо не зацикливался(вся суть не в этом), за исходную взял пример инфо-блоков Bootstrap. Способ отлично срабатывает во всех современных браузерах, пользователи застрявшие на замшелых версиях IE-шки, к сожалению пролетают мимо.
Не даёт мне покоя тема организации просмотра видео в модальном блоке, исключительно средствами CSS3, без javascrip. Нет с выводом видео в модальном окне всё в порядке, не могу найти адекватного и всех устраивающего решения остановки видео при закрытии окна. Тупо использовал ссылку с пустым атрибутом href="", многих распальцованных мастеровых от этого не совсем кошерного способа переворачивает во сне, но другого более действенного и валидного решения, на данный момент пока не нашёл.
Меня часто спрашивали, можно ли встроить внутрь модального окна, какой-нибудь слайдер, не только для картинок, но и для текста. Почему бы и нет. У буржуинов нашелся простенький, подходящий по всем параметрам ротатор контента, оставалось объединить его с уже готовым модальным окном. И в итоге получилось то, что получилось:)). Посмотрите, всё довольно просто в исполнении.
На многих сайтах используются всплывающие формы обратной связи, формы регистрации и входа. Проще всего встроить рабочую форму в готовое модальное окно. Берётся вполне себе приличная форма, свёрстанная на CSS3, любой вариант модального окна представленный выше, остаётся лишь оба эти элемента объединить в единый механизм. Как это сделать? Именно об этом, подробно расписано в представленном уроке.
Отличная возможность для ваших пользователей отправлять сообщения с любой страницы, или отдельной записи сайта (блога) — это отдельная, модальная форма контактов. Правильно прикручиваете к форме php-обработчик, размещаете в тело нужной вам страницы и всё, остаётся только периодически проверять свой почтовый ящик. Данный метод корректно работает во всех современных браузерах: Chrome, Firefox, Opera, Safari, так же в Internet Explorer, начиная с 9-й версии. Сама форма наделена функциями модального окна с помощью магии CSS3.
Лайтбокс своего рода то же модальное окно, вернее принцип работы практически тот же, правда используется по большей части для просмотра увеличенных или полно-размерных изображений. В своё время решил заделать более-менее адаптивную версию Lightbox, исключительно средствами CSS3. Что из этого получилось сможете узнать посмотрев пример и если тема вставит, изучите и урок. Пользователи плотно подсевшие на IE 8 и ниже, к сожалению ничего не увидят, метод основан на использовании псевдокласса:target .
Интересное (на мой взгляд) решение создания отдельной, оригинально оформленной, всплывающей формы контактов для сайта. Работа формы основана на обработке события onclick . Оформление с помощью оригинального изображения в виде почтового конверта. Работает форма быстро и корректно во всех браузерах, так что вполне достойный образец средств взаимодействия с пользователями.
Меня, как и многих других вымораживают различные всплывающие окна при начальной загрузке сайта. Считаю такой метод черезчур навязчивым. Но фишка востребована и широко использована, а значит посмотреть как всё это дело работает, наверное всё же стоит. Все современные браузеры с подозрением относятся к разного рода всплывающим окнам на первоначальном этапе загрузки сайта, они их просто-напросто блокируют. В представленном уроке, подробно расписываю, как эту блокировку можно обойти, так же узнаете, как правильно использовать cookie, чтобы окно являлось взору пользователя один раз при первом заходе на сайт, или же с определённым интервалом.
На этом пожалуй и всё. Конечно в загашнике найдётся ещё пара-тройка рабочих вариантов создания модальных окон, а в интернетах то их сколько, главное найти то что нужно. Надеюсь эта подборка поможет сориентироваться по теме в ворохе статей моего блога. По мере удачных раскопок и нахождению затерявшегося материала, обзор будет обновляться.
С Уважением, Андрей
В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования javascript, плагинов jQuery и т.д. Больший интерес вызывает возможность применения чистых стилей и неисчерпаемого потенциала новых функций .
Основываясь на разработках некоторых уважаемых буржуинов, они в этом плане ребята ушлые, получаются неплохие результаты, в плане создания модальных окон с помощью CSS3. Задача, в первую очередь состоит в том, чтобы добиться более-менее устойчивой кросбраузерности конечного результата, ну и конечно же, с наименьшими потерями, уменьшить общее количество кода, как в HTML так и в CSS, дабы облегчить жизнь многострадальным труженикам сайтостроения.
Что получается в итоге, у меня в этом плане на сегодняшний день, мы с вами и посмотрим, а заодно, и научимся делать всплывающие модальные окна с помощью «магии» CSS3.
Обновлено: 27.10.2017
Для начала, все те кого заинтересовала эта тема, можете взглянуть на пример работы модальных окон в различных вариантах и скачать исходники:
Не стоит воспринимать данный урок, как руководство к действию, так как на этом этапе удалось добиться уверенной поддержки лишь современными браузерами (IE 9+, Firefox, Safari, Opera, Chrome ). С оглядкой на то, что древние версии браузера IE еще достаточно популярены среди пользователей, рекомендую рассматривать эту статью в виде некоего эксперимента, демонстрации возможностей CSS3.
Хорошо, теперь перейдем непосредственно к самой раскладке html кода и стилевого формирования нашего модального окна с помощью css3)))
Шаг 1. HTMLВо-первых, давайте создадим основную разметку HTML. Как вы можете видеть, базовая конструкция довольно простая, если рассматривать именно html-разметку модальных окон и кнопок(ссылок), для их активации. Каждое модальное окошко, представляет из себя ничто иное, как стандартный контейнер , с определенным содержание внутри и кнопкой «Закрыть», сформированной исключительно средствами css.
| < a href= "#win1" class = "button button-green" > Открыть окно 1 < a href= "#win2" class = "button button-red" > Открыть окно 2 < a href= "#win3" class = "button button-blue" > Видео в окне 3 < a href= "#win4" class = "button button-orange" > Фото в окне 4 < 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. Стоит упомянуть о том, что текст для каждого из шаблонов был написан вручную. К тому же, вам не нужно обладать какими-то сверхъестественными знаниями в сфере программирования, чтобы создать впечатляющий онлайн-проект.
С Уважением, Андрей
Модальные окна - часто используемый инструмент в арсенале веб мастера. Он очень удачно подходит для решения большого количества задач, таких как вывод форм регистрации, рекламных блоков, сообщений и так далее.
Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на JavaScript, что может создавать проблемы при расширении функционала или обеспечении обратной совместимости.
HTML5 и CSS3 позволяют создавать модальные окна с необычайной легкостью.
Разметка HTMLПервый шаг на пути к созданию модального окна - простая и эффективная разметка:
Открыть модальное окно
Внутри элемента div размещается содержание модального окна. Также нужно организовать ссылку для закрытия окна. Для примера разместим простой заголовок и несколько параграфов. Полная разметка для нашего примера будет выглядеть следующим образом:
Открыть модальное окно X Модальное окно
Пример простого модального окна, которое может быть создано с использованием CSS3.
Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.
СтилиСоздаем класс 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; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; }
Наше окно будет иметь фиксированное положение, то есть смещаться вниз, если вы будете прокручивать страницу при открытом окне. Также наш фон черного цвета будет расширяться на весь экран.
Фон будет иметь небольшую прозрачность, а также располагаться поверх всех остальных элементов за счет использования свойства z-index .
В завершении устанавливаем переходы для вывода нашего модального окна и скрываем его в неактивном состоянии.
Может быть вы не знаете свойство pointer-events , но оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. Мы устанавливаем значение его значение для класса modalDialog , так как ссылка не должна реагировать на нажатие кнопки мыши когда активен псевдо класс “:target” .
Теперь добавляем псевдо класс :target и стили для модального окна.
ModalDialog:target { display: block; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); }
Псевдо класс target изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства pointer-events .
Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.
Закрываем окноТеперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:
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: #00d9ff; }
Для нашей кнопки устанавливаем фон и положение текста. Затем позиционируем кнопку, делаем ее круглой с помощью свойства скругления рамки и формируем легкую тень. При наведении курсора мыши на кнопку будем изменять цвет фона.