Создавайте модалы, используя чистый CSS с модальным CSS

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

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

Ганс Кристиан Рейнл, тот, кто разработал Модальный CSS, включил в себя множество преимуществ, которые идут с ним. Некоторые из преимуществ заключаются в том, что его можно использовать в качестве плагина SASS, он поддерживает несколько браузеров, оптимизирован для мобильных устройств, его можно вставлять с помощью мультимедиа (изображения, видео и звука), и он небольшой и быстрый.

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

Рекомендуемое чтение: 50 полезных фрагментов CSS, которые должен иметь каждый дизайнер

HTML-разметка

CSS Modal состоит из трех частей: верхний колонтитул, контент и нижний колонтитул. Заголовок, где вы можете поместить заголовок для модального. Контент предназначен для отображения важной информации, которую вы хотите выделить. Эта часть поддерживает текст, картинки и встроенный код. Что касается нижнего колонтитула, вы можете добавить сюда дополнительную информацию, такую ​​как кнопка закрытия, кнопка открытия нового окна и т. Д.

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

×

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

Верхний и нижний колонтитулы являются необязательными частями, которые вы можете (или не можете) включать. Но имейте в виду, что если вы используете заголовок, вы должны добавить уникальное имя ID и изменить атрибут aria-labelledby на то же значение.

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

.. ..

Дополнительный Javascript

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

• Проблемы с совместимостью с IE 8
• Клавиатура Escape кнопка для выхода
• Предотвращение прокрутки фона
• Эффект фокуса на модал и обратно на страницу после его закрытия

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

Последняя мысль

Создание модального с помощью чистого CSS все еще имеет некоторые недостатки, но оно может стать альтернативным инструментом для дальнейшего обогащения вашего сайта. И вы, вероятно, хотите попробовать что-то немного другое. Приложив немного креатива, вы могли бы сделать несколько довольно классных модалей. Дать ему шанс.