Сегодня короткий пост на тему реализации модальных окон без Javascript, на чистом HTML + CSS. Раньше приходилось писать ужасный обвяз вокруг перекрытий, а теперь больше не нужно
Пример кода
Toggle Popover
Правила использования
- Use title if the content in my popover is just text.
- Use the popover attribute if the content is more than plain text and like a menu of options or something.
- Use if you need to force the user to make a decision or block all other interactions on the page.
К примеру, вы можете теперь реализовывать контекстные меню также просто
Пример на codepen по базовому использованию: https://codepen.io/chriscoyier/pen/XWQwjPY/8c499122e4ab74c76d4997e1ce8a3ce6
Коллекция примеров: https://codepen.io/collection/ExkRWw
Из заметок: обновите Chrome до последней версии, к примеру на предыдущей сборке 124.0.6367.119, оно не работало должным образом, поэтому нужна бета 125-ая
Тут можно узнать про обновление https://developer.chrome.com/blog/chrome-125-beta
Официальная документацию тут: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using
Веб-сайт показывающий логику позиционирования: https://anchor-tool.com/
