• Создание сайтов в Санкт-Петербурге

    Создание сайтов.

    Санкт-Петербург.

  • Разработка сайтов СПб

    Разработка

    сайтов

  • Продвижение сайтов СПб

    Продвижение

    Раскрутка

  • Сопровождение сайтов в Санкт-Петербурге

    Сопровождение

    созданных сайтов

  • Уникальные дизайны для Ваших сайтов

    Уникальные дизайны

    для Ваших сайтов

  • Техническая поддержка

    Техническая

    поддержка

  • Лучшие сайты для бизнеса

    Лучшие сайты

    для бизнеса!

Бесплатные уроки по HTML . +7 952 213 43 66
Санкт-Петербург

Модальное окно с помощью HTML5 и CSS3.


modal
demo исходники

Разметка HTML

Делаем ссылку открывающую окно, и создаём само окно. Код:

1<a href="#openModal" class="modlink">Открыть модальное окно</a>
2 
3<div id="openModal" class="modalDialog">
4...
5</div>

Содержимое модального окна

Заголовок и текст размещаем в тег <div> и вставляем в код вместо многоточия. Вставляем ссылку, по которой будет закрываться окно :class="close". Код:

01<a href="#openModal" class="modlink">Открыть модальное окно</a>
02 
03<div id="openModal" class="modalDialog">
04 
05<div>
06<a href="#close" title="Close" class="close">X</a>
07<h2>Mr.Site-cоздание сайтов</h2>
08<p><b>Mr.Site</b> - создание, разработка, продвижение и сопровождение сайтов в Санкт-Петербурге.</p>
09</div>
10 
11</div>

Стили

Прописываем стили стили для окна. Делаем невидимым окно. Появление окна будет только при нажатии на ссылку. Прописываем стиль: modalDialog:

01.modalDialog {
02position: fixed;
03font-family: Arial, Helvetica, sans-serif;
04top: 0;
05right: 0;
06bottom: 0;
07left: 0;
08background: rgba(0,0,0,0.8);
09z-index: 99999;
10opacity:0;
11-webkit-transition: opacity 400ms ease-in;
12-moz-transition: opacity 400ms ease-in;
13transition: opacity 400ms ease-in;
14display: none;
15pointer-events: none;
16}

Функционал и просмотр

Добавляем несколько стилей: modalDialog:

01.modalDialog:target {
02opacity:1;
03pointer-events: auto;
04display: block;
05}
06 
07.modalDialog > div {
08width: 400px;
09position: relative;
10margin: 10% auto;
11padding: 5px 20px 13px 20px;
12border-radius: 10px;
13background: #fff;
14background: -moz-linear-gradient(#fff, #b8ecfb);
15background: -webkit-linear-gradient(#fff, #b8ecfb);
16background: -o-linear-gradient(#fff, #b8ecfb);
17}

Дописываем стили для кнопки close.

Кнопка close

Пишем стили для кнопкиclose:

01.close {
02background: #606061;
03color: #FFFFFF;
04line-height: 25px;
05position: absolute;
06right: -12px;
07text-align: center;
08top: -10px;
09width: 24px;
10text-decoration: none;
11font-weight: bold;
12-webkit-border-radius: 12px;
13-moz-border-radius: 12px;
14border-radius: 12px;
15-moz-box-shadow: 1px 1px 3px #000;
16-webkit-box-shadow: 1px 1px 3px #000;
17box-shadow: 1px 1px 3px #000;
18}
19 
20.close:hover {background: #860015;}

Окончательный вариант модального окна:

modal


У Вас проблемы с созданием сайта? Только для Вас - html шаблоны.


Если Вы уже определились и решились заказать сайт,
то перейдите на страницу заказа или позвоните по телефону
+7 952 213 43 66.