💬 Всплывающее окно без JavaScript
Нативный Popover API позволяет создавать меню, подсказки и небольшие всплывающие панели средствами HTML.
Добавляем кнопку:
Открыть
Создаём всплывающий элемент:
Содержимое
После нажатия браузер самостоятельно откроет элемент. Повторное нажатие, клик снаружи или клавиша Escape закроют его.
При необходимости окно можно оформить через CSS:
[popover] {
padding: 20px;
border: 0;
border-radius: 12px;
box-shadow: 0 12px 40px #0004;
}
Меньше JavaScript — проще управление состоянием и базовой доступностью интерфейса.
#html #frontend #webdev
Нативный Popover API позволяет создавать меню, подсказки и небольшие всплывающие панели средствами HTML.
Добавляем кнопку:
Открыть
Создаём всплывающий элемент:
Содержимое
После нажатия браузер самостоятельно откроет элемент. Повторное нажатие, клик снаружи или клавиша Escape закроют его.
При необходимости окно можно оформить через CSS:
[popover] {
padding: 20px;
border: 0;
border-radius: 12px;
box-shadow: 0 12px 40px #0004;
}
Меньше JavaScript — проще управление состоянием и базовой доступностью интерфейса.
#html #frontend #webdev