2015
5
Март

Модальные всплывающие окна



Поистине не исчерпаем потенциал свойств CSS3, используя которые можно создавать различные интересные вещи на сайте, например модальные всплывающие окна. Использовать окна можно при описании товара, использования цитат, приветствий.

Чаще для использования всплывающих окон применялись скрипты Javascript. С развитием свойств CSS3 можно получить интересные результаты по созданию модальных окон. Используя HTML и свойства CSS3 можно сократить код и добиться хорошего конечного результата.


Сегодня будем рассматривать создание всплывающего модального окна при помощи CSS3. Материал сделан на основе различных зарубежных источников.

В модальное окно можно вставлять текст, видео или изображения. Данный материал можно использовать для просмотра в современных браузерах и интернет эксплорера не ниже 9 версии.

При создании модальных окон используем HTML код и свойства CSS3.

HTML страница


Создаем разметку HTML с использованием разметки модального окна и кнопки для вызова. Структура модального окна включает блочный DIV элемент с внутренним содержанием материала и кнопку для закрытия окна. В примере кода постаралась прописать комментарии, которые вам помогут лучше разобраться при создании окон. В дальнейшем достаточно в контейнер поместить нужный материал.

<!-- Ссылки на вызов модальных окон--> <div style="text-align: center;"> <a href="#win1" class="button button-green">Открыть окно 1</a> <a href="#win2" class="button button-red">Открыть окно 2</a> <a href="#win3" class="button button-blue">Видео в окне 3</a> <a href="#win4" class="button button-orange">Фото в окне 4</a> </div> <!-- Вызов окна через миниатюру изображения --> <div style="text-align: center;"> <a href="#win5"><img title="Река Хопер" src="img/realism_lrg.jpg" width="150" height="150" alt="Река Хопер" /></a> </div> <!-- Модальное окно №1 --> <a href="#x" class="overlay" id="win1"></a> <div class="popup"> РАЗМЕЩАЕТЕ ЛЮБУЮ ИНФОРМАЦИЮ (ТЕКСТ, КАРТИНКИ, ВИДЕО). <a class="close"title="Закрыть" href="#close"></a> </div> <!-- Модальное окно №2 --> <a href="#x" class="overlay" id="win2"></a> <div class="popup"> РАЗМЕЩАЕТЕ ЛЮБУЮ ИНФОРМАЦИЮ (ТЕКСТ, КАРТИНКИ, ВИДЕО). <a class="close" title="Закрыть" href="#close"></a> </div> <!-- Модальное окно №3 --> <a href="#x" class="overlay" id="win3"></a> <div class="popup"> <h2>Заголовок</h2> ВСТАВЛЯЕТЕ ВИДЕО С ЛЮБОГО СТОРОННЕГО СЕРВЕРА (YouTube, Vimeo и т.д.) <a class="close" title="Закрыть" href="page.html" onclick="return false"></a> <!-- Выключение видео при закрытии окна --> </div> <!-- Модальное окно №4 --> <a href="#x" class="overlay" id="win4"></a> <div class="popup"> <img class="is-image" src="ВАША КАРТИНКА.jpg" alt="" /> <a class="close" title="Закрыть" href="#close"></a> </div> <!-- Модальное окно №5 --> <a href="#x" class="overlay" id="win5"></a> <div class="popup"> <img class="is-image" src="ВАША КАРТИНКА.jpg" alt="" /> <a class="close" title="Закрыть" href="#close"></a> </div>

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; }

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