CSS Modal

разрабатываем модальные окна при помощи чистого кода CSS

CSS Modal

CSS Modal



В веб-дизайне вам просто необходимо правильно сортировать контент. Это позволяет посетителям гораздо проще воспринимать информацию. Всего этого можно доиться посредством опрятной и продуманной разметки на сайте. Чтобы организовать контент, вы можете использовать множество элементов и структур интерфейса, и модальные окна – это один из них.

Если вы когда-нибудь пробовали создавать модальные окна при помощи jQuery и других плагинов, то сегодня мы хотим предложить вам кое-что интересное. При помощи библиотеки CSS Modal, вы можете использовать только чистый код CSS.

Разработчик CSS Modal, Hans Christian Reinl, включил в эту библиотеку множество дополнений. Среди них можно отметить тот факт, что ее можно использовать в качестве SASS-плагина, кросс-браузерную поддержку, оптимизацию под мобильные устройства, а также то, что ее можно интегрировать в разметку при помощи медиа-элементов, будь то изображение видео или звук. Кроме того, она невероятно маленькая и быстрая.

Практически все современные браузеры поддерживают CSS Modal. Библиотеку протестировали в Chrome, Firefox, Safari 6, Opera 12, IE8, IE9+, Windows Phone 8, iOS 6 и Android. Несмотря на то, что в Android 2.3 все еще присутствуют некоторые нестыковки (на данный момент основная проблема возникает при прокрутке), она все равно работает довольно стабильно.

HTML-разметка

В CSS Modal у нас есть возможность поработать над тремя частями: заголовочная часть, контент и подвал. Заголовочная часть – это то место, куда можно поместить заголовок модального окна. Раздел с контентом предназначенная для отображения важной информации, которую вам нужно донести до посетителей. Сюда можно поместить текст, изображения, а также встроенный код. Что же касается подвала, то здесь можно разместить дополнительную информацию, будь то кнопка закрывания, кнопка для открытия нового окна и так далее.

Чтобы создать модальное окно, используйте тэг section и несколько заранее установленных data-атрибутов, а также class и id. Внутри тэга section нужно разместить элемент, обернутый в класс .modal-inner. Предлагаем вам взглянуть на основную разметку:

id в тэге section используется для запуска модального окна из другой функции (к примеру, при помощи ссылки), а также у нас есть возможность изменить значение на нужное. Тэг в коде будет использоваться в качестве кнопки закрывания модального окна. Атрибут элемента href должен быть использован так, как показано выше, так как он предотвратить прокрутку страницы вверх при нажатии.

Header и footer – это опциональные части окна, которые вы можете даже не использовать. Однако учтите, что если вы используете header, вам следует добавить уникальное id имя и изменить атрибут aria-labelled на то же значение.

Не забудьте включить в ваш проект библиотеку CSS Modal, которую можно скачать со страницы GitHub.

 

Дополнительный javascript-код

Стоит отметить некоторые проблемы, которые до сих пор возникают при использовании CSS Modal на чистом CSS-коде:

* Проблемы с работой в IE 8
* Отсутствие возможности закрывать окно при помощи кнопки Escape
* Необходимость предотвращать прокрутку фона
* Проблемы с фокусированием внимания при открытии модального окна и его последующем закрытии.

Для того, чтобы исправить эти проблемы, нам понадобится немного кода javascript. К счастью, CSS Modal предлагает нам облегченную версию javascript-кода, которая поможет быстро и просто решить эти проблемы. Включите этот код перед закрывающим тэгом body.