Css modal: How To Make a Modal Box With CSS and JavaScript

Содержание

Modal — CSS-компоненты Tailwind

Modal используется для отображения диалогового окна или окна при нажатии кнопки.

Имя класса	Тип
модальный	Компонент	Контейнерный элемент
модальный ящик	Компонент	Содержание модального окна
модальное действие	Компонент	Контейнер для модальных кнопок действий
модальный фон	Компонент	Фон, который закрывает заднюю часть модального окна, поэтому мы можем закрыть модальное окно, щелкнув снаружи
модальный переключатель	Компонент	Для скрытого флажка, управляющего модальным окном
модально-открытый	Модификатор	Добавить/удалить этот класс, чтобы открыть/закрыть модальное окно с помощью JS
модальный верх	Отзывчивый	Перемещает модальное окно наверх
модальное дно	Отзывчивый	Перемещает модальное окно вниз
модально-средний	Отзывчивый	Перемещает модальное окно в середину (по умолчанию)

Есть 3 способа использования модального окна:

Использование элемента : для открытия требуется JS, но он имеет лучшую доступность, и мы можем закрыть его с помощью клавиши Esc
Использование скрытого и для установки/снятия флажка и открытия/закрытия модального окна

Использование якорных ссылок: ссылка добавляет параметр к URL-адресу, и вы видите модальное окно только тогда, когда URL-адрес имеет этот параметр

Убедитесь, что вы используете уникальные идентификаторы для каждого модального окна

Поддержите daisyUI, став спонсором

3 слота доступны

Modal • Pico.css

Классический модальный элемент с изящными интервалами между устройствами и окнами просмотра.

Модальные окна создаются с < диалоговым окном > в качестве оболочки и < статьей > в качестве контейнера содержимого.

Внутри < заголовок > , < a класс = "закрыть" > определяется как float : справа ; позволяет выравнивать значок закрытия по верхнему краю с заголовком.

Модальное заглавие

Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.

 <  диалоговое окно   открыть  >
  <  артикул  >
    <  заголовок  >
      <  a   href  =  "#close"   aria-label  =  "Close"   class  =  "close"  > a 901 82 >
      Модальное название
     заголовок  >
    <  р  >
      Nunc nec ligula a tortor sollicitudin dictum in vel enim.
      Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
      Sed eleifend dui nec ullamcorper.
      Praesent vehicula lacus ac justo accumsan ullamcorper.
     р  >
   артикул  >
 dialog  >

Внутри < нижний колонтитул

> содержимое по умолчанию выравнивается по правому краю.

Подтвердите действие!

Mauris non nibh vel nisi sollicitudin malesuada. Donec ut sagittis erat. Praesent eu eros felis. Ut consectetur placerat pulvinar.

CancelConfirm

 <  диалоговое окно   открыть  >
  <  артикул  >
    <  h4  >Подтвердить действие! ч4  >
    <  р  >
      Mauris non nibh vel nisi sollicitudin malesuada.
      Donec ut sagittis erat. Praesent eu eros felis.
      Ut consectetur placerat pulvinar.
     стр  >
    <  нижний колонтитул  >
      <  a   href   =  "#cancel"   role  =  "button"   class  =  "secondary"  >Cancel a 9018 2 >
      <  a   href  =  "#подтвердить"   роль  =  "кнопка"  >Подтвердить a  >
     нижний колонтитул  >
   артикул  >
 диалоговое окно  >

Живая демонстрация

Переключите модальное окно, нажав кнопку ниже.

   
<  кнопка   класс  =  "контраст" 
    цель данных  =  "модальный пример" 
    onClick  =  "toggleModal(событие)"  >
  Запустить демо-модал
 кнопка  >
   
<  диалог   id  =  "модальный пример"   >
  <  артикул  >
    <  a   href  =  "#close" 
        aria-метка  =  "Закрыть" 
        класс  =  "закрыть" 
        цель данных  =  "модальный пример" 
        onClick  =  "toggleModal(event)"  >
     и  >
    <  h4  >Подтвердите действие! h4  >
    <  р  >
      Cras sit amet maximus risus. 
      Pellentesque sodales odio sit amet augue finibus pellentesque.
      Nullam finibus risus non semper euismod.
     стр  >
    <   нижний колонтитул  >
      <  a   href  =  "#отмена" 
          роль  =  "кнопка" 
          класс  =  "вторичный" 
          цель данных  =  "модальный пример" 
          onClick  =  "toggleModal(event)"  >
        Отмена
       и  >
      <  a   href  =  "#подтвердить" 
          роль  =  "кнопка" 
          цель данных  =  "модальный пример" 
          onClick  =  "toggleModal(event)"  >
        Подтверждать
       и  >
     нижний колонтитул  >
   артикул  >
 dialog  >

Pico не включает код JavaScript. Вам нужно будет реализовать свой JS для взаимодействия с модальными окнами.

В качестве отправной точки вы можете посмотреть на этот пример: modal.

Modal — CSS-компоненты Tailwind

# Способ 1: использование диалогового элемента рекомендуется

#Метод 2: использование скрытого флажка

# Способ 3: использование анкорных ссылок legacy

Спонсоры