Создание CSS модального окна
Первым делом создаем и оформляем кнопку (ссылку) для открытия модального, ее HTML-код:
<a href="#modal-one" class="btn-modal">Открыть модальное окно</a>По идее ее можно и не оформлять, но так как то не интересно, давайте сделаем ссылку в виде кнопки, для этого добавим немного css:
.btn-modal{background:#ff9500;border:#e08403 solid 1px;border-radius:3px;color:#fff;display:inline-block;padding:8px 15px;text-decoration:none;text-align:center;min-width:60px;position:relative;transition:color .1s ease}
.btn-modal:hover{background:#e08403}Данная ссылка, получается якорная и будет ссылаться на блок с id = modal-one. Так как мы будем использовать только CSS, а не модальное окно JQuery, нужно применить псевдо-селектор “:before target”.
Далее нужно сохранить все содержимое модального окна. Внутри div мы поместим гиперссылку. Она закрывает контейнер, который мы выводим с помощью CSS. Затем можно поместить заголовок с несколькими пунктами текста под ним. Наша HTML-разметка будет выглядеть следующим образом:
<!-- Модальное окно -->
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
Заголовок модального окна
<a href="#close" class="btn-close" aria-hidden="true">×</a>
</div>
<div class="modal-body">
Содержимое модального окна
</div>
</div>
</div>
<!-- / Модальное окно -->Задаем стили модального окна
Чтобы сделать его более практичным и симпатичным напишем немного CSS оформления. Сначала создадим класс modal для модального окна на CSS. Для него мы используем псевдоэлемент :before:
.modal:before{content:"";display:none;background:rgba(0,0,0,0.7);position:fixed;top:0;left:0;right:0;bottom:0;z-index:10}
.modal:target:before{display:block}Мы создаем модальное окно, задав для него фиксированную позицию. Оно будет смещаться вниз, когда пользователь прокручивает страницу.
Дополнительно мы устанавливаем для верхнего, правого, нижнего и левого края значение ноль, чтобы затемненный фон охватывал весь экран. Теперь нужно задать фон, рамку, радиус для .modal-dialog, а также фиксированную позицию. Наш CSS код будет выглядеть следующим образом:
.modal-dialog{background:#fefefe;border:#333 solid 1px;border-radius:5px;margin-left:-180px;position:fixed;left:50%;top:-100%;z-index:11;width:360px;-webkit-transform:translate(0,-500%);-ms-transform:translate(0,-500%);transform:translate(0,-500%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out}Далее нужно установить для modal-dialog свойство translate в 0. Здесь мы также устанавливаем top: 25%:
.modal:target .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);top:25%}Вот еще несколько стилей, которые нужно использовать, чтобы модальное окно выглядело красиво:
.modal-body{padding:20px}
.modal-header,.modal-footer{padding:10px 20px}
.modal-header{border-bottom:#eee solid 1px;font-size:20px}Теперь, когда мы задали стили модального окна HTML и сделали его функциональным, нам осталось стилизовать кнопку закрытия. Код CSS:
.btn-close{color:#aaa;font-size:30px;text-decoration:none;position:absolute;right:5px;top:0}
.btn-close:hover{color:#919191}
#close{display:none}Что получилось смотрите в demo.
Вот весь приведенный выше CSS код:
/* CSS для кнопки открытия модального окна */
.btn-modal{background:#ff9500;border:#e08403 solid 1px;border-radius:3px;color:#fff;display:inline-block;padding:8px 15px;text-decoration:none;text-align:center;min-width:60px;position:relative;transition:color .1s ease}
.btn-modal:hover{background:#e08403}
/* CSS для модального окна */
.modal:before{content:"";display:none;background:rgba(0,0,0,0.7);position:fixed;top:0;left:0;right:0;bottom:0;z-index:10}
.modal:target:before{display:block}
.modal-dialog{background:#fefefe;border:#333 solid 1px;border-radius:5px;margin-left:-180px;position:fixed;left:50%;top:-100%;z-index:11;width:360px;-webkit-transform:translate(0,-500%);-ms-transform:translate(0,-500%);transform:translate(0,-500%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out}
.modal:target .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);top:25%}
.modal-body{padding:20px}
.modal-header,.modal-footer{padding:10px 20px}
.modal-header{border-bottom:#eee solid 1px;font-size:20px}
.btn-close{color:#aaa;font-size:30px;text-decoration:none;position:absolute;right:5px;top:0}
.btn-close:hover{color:#919191}
/*добавляем, чтобы остановить прокручивание вверх*/
#close{display:none}Несколько модальных окон на странице
Часто требуется на странице вывести несколько модальных окон, сделать это просто. Для этого вам нужно для новой кнопки задать новый якорь, например:
<a href="#modal-two" class="btn-modal">Открыть модальное окно 2</a>И поместить еще один вывод модального окна с таким id:
<!-- Модальное окно 2 -->
<div class="modal" id="modal-two" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
Заголовок модального окна 2
<a href="#close" class="btn-close" aria-hidden="true">×</a>
</div>
<div class="modal-body">
Содержимое модального окна 2
</div>
</div>
</div>
<!-- / Модальное окно 2 -->Демонстрация
Заключение
Главным преимуществом нашего модального окна является то, что оно создано с использованием только HTML5 и CSS3. Почему это так важно? Как минимум они не замедляют сайт — т.к. используется десяток строк оформления. А создать модальное окно на Javascript — может даже новичок, т.к. существует масса готовых решений.
Теперь вы можете создать с помощью HTML5 и CSS3 простое модальное окно, которое можно использовать для формы входа или регистрации, рекламных блоков и многого другого.
Смотрите также:
Адаптивное меню на чистом CSS.
Бегущая строка на чистом CSS.
