—»     —»   CSS Modal: разрабатываем модальные окна при помощи чистого кода CSS
  Раздел: CSS/Style Sheets   Нет комментариев  

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



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

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

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. Предлагаем вам взглянуть на основную разметку:

<section class="semantic-content" id="modal-id" tabindex="-1"
role="dialog" aria-labelledby="modal-label" aria-hidden="true">

<div class="modal-inner">
<header id="modal-label"><!-- Header --></header>
<div class="modal-content"><!-- The modals content --></div>
<footer><!-- Footer --></footer>
</div>

<a href="#!" class="modal-close" title="Close this modal" data-close="Close"
data-dismiss="modal">&#215;</a>
</section>

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

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

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

<head>
..
<link rel="stylesheet" href="css/modal.css">
..
</head>

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

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

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

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

<script type="text/javascript" src='js/modal.js'></script>
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 5317   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2017    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031