Модальное окно на чистом CSS (без JavaScript)

Модальное окно на чистом CSS без JavaScript Верстка
Сегодня урок о том как при помощи CSS3 (без использования JavaScript) создать адаптивное модальное окно, которое будет нормально работать и отображаться на смартфонах, планшетах, пк, телевизорах.

Создание 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 -->

Демонстрация

Смотреть Demo

Заключение

Главным преимуществом нашего модального окна является то, что оно создано с использованием только HTML5 и CSS3. Почему это так важно? Как минимум они не замедляют сайт — т.к. используется десяток строк оформления. А создать модальное окно на Javascript — может даже новичок, т.к. существует масса готовых решений.

Теперь вы можете создать с помощью HTML5 и CSS3 простое модальное окно, которое можно использовать для формы входа или регистрации, рекламных блоков и многого другого.

Смотрите также:
Адаптивное меню на чистом CSS.
Бегущая строка на чистом CSS.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru