В этой статье представлен пример использования HTML5 и CSS3 для создания модального окна и предоставлен доступ всем желающим. Подробности следующие:
Пример исходного кодаВозможно, вы не хотите читать кучу длинных инструкций ниже и хотите напрямую просмотреть исходный код или онлайн-пример. Ссылка ниже представляет собой функциональное модальное окно, которое я создал с использованием перехода CSS3, непрозрачности, события указателя и других атрибутов.
Вы можете нажать на него, чтобы перейти на Github и просмотреть исходный код: ModalBox-Tutorial.
HTML-структураВнешние компоненты управляются бизнес-сценариями и сценариями взаимодействия, и модальные окна не являются исключением. Распространенным сценарием является выполнение операции, например нажатие кнопки, а затем отображение модального окна для предоставления обратной связи пользователю или руководства для пользователя. для выполнения взаимодействия интерфейса. Взаимодействие модального окна может включать в себя 5 шагов:
1. Существует кнопка или ссылка, которую пользователь нажимает, чтобы вызвать отображение модального окна;
2. Когда отображается модальное окно, появится прозрачный слой маски, который блокирует весь текущий экран просмотра;
3. Содержимое модального окна появится в определенной позиции (обычно в середине) области просмотра непрозрачным цветом (обычно белым);
4. Содержимое модального окна (обычно в правом верхнем углу) будет иметь значок закрытия. При нажатии на него модальное окно скроется;
5. Содержимое модального окна должно определяться на основе реального бизнес-сценария, чтобы оно могло иметь любую структуру.
стиль
1. .modalbox изначально скрыт;
1. .modalbox — прозрачный слой маски;
2. .modalbox-dialog — непрозрачный слой контента;
3. После нажатия ссылки «Показать модальное окно» отобразится .modalbox;
4. После нажатия .modalbox-close-btn .modalbox будет скрыт;
Пример эффекта
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.