Как сделать диалоговое окно css
Добавил пользователь Cypher Обновлено: 05.10.2024
Элемент HTML5 dialog обеспечивает выполнение функции в диалоговом окне на веб-странице. Диалоговое окно элемента dialog находится в дереве DOM, и может быть оформлен с помощью обычных CSS.
Простые примеры элемента dialog
Сам по себе элемент dialog визуально ни чего не покажет, нужно использовать JavaScript API, чтобы открыть и закрыть диалоговое окно.
.show() и .close() API
Закрыть Открыть диалоговое окно!
Стиль для диалогового окна
Добавить произвольный стиль к элементу dialog, можно так же как и к другим элементам блока: nav, div, footer и т.д.
Стили для элемента dialog так же легко как и для div !
Закрыть Открыть диалоговое окно со стилями
Функция .showModal() API
Что бы сделать диалоговое окно модальным, нужно вызвать функцию .showModal() вместо .show() . Заметьте, вы не можете выделить текст в фоновом режиме или нажать кнопку для выбора кнопок в открытом диалоговом окне.
Этот слой поверх окон других элементов, независимо от значений z-index , в том числе ранее открытых модальных диалоговых окон.
Добавление фона для диалогового окна
Что бы залить фон цветом, можно использовать псевдо-элемент ::backdrop .
Тусклый фон, с использованием ::backdrop . Он выделяет диалоговое окно скрывая остальное!
Закрыть Открыть диалоговое окно с фоном
Возврат значений из диалогового окна
Вы можете передать аргумент для .close() . Диалоговое окно возвращает заданное значение свойства .returnValue .
Диалоговое окно получает аргумент close(). Это будет отражено в .returnValue
Преимущества элемента
Конечно, можно использовать библиотеку jQuery или другие JavaScript для получения такого результата. Но dialog является элементом HTML и для него не нужно подключать сторонние библиотеки что бы сделать всплывающее диалоговое окно.
Элемент также отлично подходит для доступности. Браузер понимает, что элемент является модальным, поэтому технологий, такие как программы чтения с экрана знают, какой контент должен быть интерактивным.
Позиционировать
Диалоги имеют какое-то особые характеристики позиционирования. По умолчанию когда вы вызываете dialog.show() диалоговое окно располагается по центру окна просмотра. Конечно, вы можете изменить это, используя обычные позиционирование в CSS, например top: 15px .
И, еще нужно знать, что абсолютное позиционирование диалогового окна, только для блока содержащего начальный контейнер. Поэтому абсолютное позиционированное диалоговое окно не понимает такие вещи, как position, overflow, и проценты.
Спецификация включает в себя якорь позиционирования, который позволяет закрепить диалог с другим элементом. Однако, пока что это не реализовано в Chrome.
Открыть несколько окон диалога
Если диалоги не модальные, они ведут себя как несколько элементов
. Для модальных браузер откладывает диалоговое окно в стек. Вершина стека является активно модальное диалоговое окно, которое блокирует остальные страницы документа. Всякий раз, когда модальное диалоговое окно открыто, оно помещается на вершину стека. Всякий раз, когда модальное диалоговое окно закрыто, оно удаляется из стека. Диалоги отображаются в порядке стека, поэтому активный диалог является самым высоким.
Каждый начинающий веб-разработчик рано или поздно сталкивается с задачей, реализовать на сайте модальное окно (аналог pop-up окна).
Модальное окно полностью блокирует работу родительского сайта, пока пользователь не закроет данное окно. Как вы понимаете, что для навязывания такого действия, содержимое модального окна, должно представлять пользу для пользователя.
Желательно отказаться от автоматически всплывающего модального окна, а предоставить пользователю только кнопку, открывающую окно и хорошо видимый элемент (обычно это крестик), закрывающий окно. Этот способ, мы сегодня и реализуем в данной статье.
Демонстрация модального окна.
Мы сделаем адаптивное модальное окно без плагинов и библиотек, на чистом CSS+JS.
HTML разметка
Создадим кнопку, при клике на которую, будет открываться модальное окно.
Оболочка окна с затемнением, внутри которого, будет окно поменьше с содержимым. Затемнение самого сайта, подсказывает пользователю, что сначала следует заняться окном.
Содержимое модального окна, состоящее из хедера, тела и футера.
Шапка модального окна
Напишите здесь что-нибудь важное
Добавьте что-нибудь менее важное.
Футер
CSS код
Оформление полноэкранного фона модального окна.
.modal display: none; /* Скрыто по умолчанию */
background-color: rgb(0,0,0); /* Затемнение фона */
background-color: rgba(0,0,0,0.5); /* Полупрозрачное затемнение */
z-index: 1; /* Фон на нижнем слое */
overflow: auto; /* При необходимости, то появиться прокрутка */
>
Модальное окно с содержанием, к которому примениться анимация.
.modal-content animation-name: animate;
animation-duration: 0.5s
>
Добавим анимации для плавного скольжения сверху вниз и постепенного появления модального окна.
Стилизуем крестик (сущность ×), при клике по которому, модальное окно закроется.
.close font-size: 30px;
font-weight: bold;
>
JS код
Без JavaScript, не будет открываться и закрываться модальное окно. Получаем все нужные элементы, участвующие в процессе.
Получить модальное окно по ID.
var modal = document.getElementById('myModal');
Получить кнопку, которая открывает модальное окно по ID.
var btn = document.getElementById("myBtn");
Получить тег span с классом close, который закрывает модальное окно.
var span = document.getElementsByClassName("close")[0];
Функции открыть / закрыть при клике.
Когда пользователь кликает по кнопке, модальное окно открывается – переходит из скрытного состояния в видимое.
btn.onclick = function() modal.style.display = "block";
>
Когда пользователь кликает на крестик в теге span, модальное окно закрывается, наоборот переходит из видимого состояния в скрытное.
span.onclick = function() modal.style.display = "none";
>
Когда пользователь кликает где-то за пределами модального окна, оно закрывается, становиться невидимым.
window.onclick = function(event) if (event.target == modal) modal.style.display = "none";
>
>
Свободное владение языком JavaScript, делает создание web-страниц – не скучным процессом, вы можете сами в этом убедиться, посмотрев мой видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру".
На CodePen вы можете увидеть весь код модального окна на CSS+JS, который можно скачать и использовать в своих проекта.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Про модальные или всплывающие окна я уже писала ряд статей у себя на блоге. В основном все они создаются при помощи специальных скриптов и плагинов.
Благодаря великому и могучему CSS3 мы можем создать на чистом css модальное окно, не прибегая к дополнительным скриптам, модулям и плагинам.
Навигация по статье:
Посмотреть пример работы и скачать исходники можно по ссылкам ниже.
Прелесть этого способа заключается в том что он подойдёт абсолютно для любого сайта, не зависимо от того работает ли он на какой то CMS или вообще без неё.
Так же этот способ прост в использовании и не требует подключения дополнительных модулей, скриптов и библиотек что облегчает код вашего сайта.
Шаг 1. Создаём разметку для модального окна
Данный фрагмент кода вы можете вывести в любом месте страницы, так как эти блоки всё равно будут позиционироваться поверх всех остальных.
Давным давно, в спецификацию HTML5 был введён некий элемент, вернее его реинкарнация, решающая проблему диалоговых и модальных окон, которые все мы так любим использовать на различных сайтах. Но, к сожалению, я настолько был так рад его появлению, что даже не заметил этого события. Хотя потеря и не велика для нынешнего положения браузерных дел — раз элемент есть, нужно с ним разобраться.
Поддержка браузерами
Вместо тысячи слов:
Нет, это не два моих любимых браузера и не нужно искать какой-то скрытый смысл тут — это всего лишь те браузеры, которые за год (почти год) научились поддерживать данный элемент.
Конечно, если вы пришли из будущего или этой статье уже не первый день, то проверить какие браузеры уже научились поддерживать этот элемент можно посмотреть тут.
Поле для экспериментов получается у нас небольшое. Жаль.
Уходя от горьких нот в части введения и поддержки браузерами, давайте перейдём к самому интересному — практике.
Разметка
Раньше диалоговые и модальные окна верстались примерно так:
Сейчас же это делается немного иначе:
Отличий не так много, но они существенны:
- Элемент скрыт по умолчанию.
- Поддерживается семантическая вёрстка внутри элемента .
Если добавить к элементу атрибут open , то перед нами предстанет само диалоговое окно:
В данной статье речь идёт не об умении использовать CSS, поэтому стили диалогового окна вы можете написать сами или посмотреть по ссылкам на jsFiddle прилагаемым к каждому пункту :)
Франкенштейн
Для того, чтобы наш элемент был полезным, его нужно оживить. Поможет нам в этом интерфейс элемента . В этом разделе статьи мы обговорим теорию использования элемента.
И перед тем, как начать говорить о методах и свойствах, которые предоставляет нам API, нужно расставить все точки над понятием диалогового и модального окна:
Диалоговое окно
Диалоговым окном называют такое окно, которое временно появляется поверх приложения (в нашем случае сайта) и запрашивает и/или предоставляет различную информацию.
Модальное окно
Модальным окном называют такое диалоговое окно, которое блокирует работу пользователя с родительским приложением (в нашем случае сайта) до тех пор, пока пользователь это окно не закроет.
Благодаря интерфейсу HTMLDialogElement , который несёт в себе несколько свойств, методов и событий, мы сможем управлять нашим диалогом. Рассмотрим этот интерфейс подробнее.
Методы
Нам доступны три метода, которые позволяют:
- show() — Открыть диалоговое окно.
- showModal() — Открыть модальное окно.
- close() — Закрыть окно.
Свойства
В свойствах тоже нет большого разнообразия:
- returnValue — Возвращаемое значение, которое можно передать в close() .
- open — Логическое значение. Если true, то окно показано, если false, то окно скрыто.
События
А тут у нас всё ещё хуже:
Разное
Помимо основных методов и свойств, элемент также поддерживает:
- form[method="dialog"] — Интеграция с формы с элементом. Действует только внутри диалогового и модального окна.
- autofocus — Перемещение фокуса на элемент управления формой внутри окна.
- cancel — Закрытие окна при нажатии кнопки Esc .
Маловато будет! Перейдём к примерам работы.
Реализация
Давайте попробуем реализовать диалоговые и модальные окна и их взаимодействие с окружающими и внутренними элементами.
Для примеров я буду использовать библиотеку Zepto.
Zepto
Библиотека Zepto по своей сути является аналогом всем известной библиотеки jQuery. Основное отличие заключается в поддержке браузеров и некотором несущественном расхождении в API.
Открытие и закрытие диалогового окна.
Для того, чтобы работать со многими диалоговыми окнами как раз и были введены атрибуты data-tools и data-target .
Открытие и закрытие модального окна. Затемнение.
Работа с модальными окнами полностью повторяет таковую с диалоговым окном с той лишь разницей, что метод show() заменяется на showModal .
Теперь наше окно выглядит иначе:
Кратко об изменениях:
- Центрирование не только по горизонтали, но и по вертикали.
- Окно отбрасывает на всю страницу фон.
- Пользователь не может взаимодействовать с объектами на странице, отличными от объектов самого окна.
Для примера, я изменил цвет затемнения на синий:
Возвращение значения из модального или диалогового окна.
Для передачи значения мы будем использовать метод close() и событие закрытия close .
После закрытия модального или диалогового окна, будь это событие нажатия на кнопку закрытия или нажатие клавиши Esc , будет отображено введённое значение:
Интеграция формы в диалоговое или модальное окно
Как уже говорилось ранее, интерфейс HTMLDialogElement предполагает наличие отдельного метода для управления диалоговым и модальным окном c помощью формы.
Немного изменим нашу разметку:
Теперь наше модальное окно выглядит так:
Осталось только слегка поменять наш скрипт. Нам нужно избавиться от обработчика кнопки закрытия окна и обработать возвращаемое значение.
Вот и всё! Соизвольте наслаждаться полученным результатом:
Спасение от Google
Для его использования необходимо подключить к странице сам полифил (CSS и JS) и, скажем так, активировать его:
При всём этом, затемнение фона так же поддерживается. Всего лишь нужно заменить конструкцию вида:
Деликатное решение проблемы :)
Вывод
Использовать элемент можно уже сейчас (если вам не мешает лишний полифил), однако, стоит обратить внимание на рациональность этого решения в вашем проекте.
Читайте новостные порталы по тематике веб-разработки, причём регулярно и не только на хорошо известных вам языках.
Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.
Читайте также: