Модальные окна на CSS

Два разных примера создания модальных окон на чистом CSS.

Первый с использованием HTML-элемента <details>, а второй с флажком <input type="checkbox">

Вариант с использованием HTML-элемента <details>

В этом примере каждая кнопка открывает одно конкретное всплывающее окно, расположенное под ней.

Закрытие окна происходит по клику вне его области, а крестик показывается как декорация.

Пример:

Модальное окно 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis.

Модальное окно 2

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

HTML:

CSS:

Вариант с использованием флажка <input type="checkbox">

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

Закрытие окна происходит по клику на крестик.

Пример:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Дмитрий:

    Подскажите, как открыть окно при нажатии на картинку?

    Ответить
    • Alexander:

      Вместо "Название кнопки" вставить картинку и убрать/изменить стили кнопки

      Ответить
  • Elen:

    Окно на чекбоксе тоже можно закрывать по клику в не его области, если сделать лейбл во весь экран под ним.

    Ответить