Сегодня короткий пост на тему реализации модальных окон без Javascript, на чистом HTML + CSS.
Раньше приходилось писать ужасный обвяз вокруг перекрытий, а теперь больше не нужно
Пример кода
<button popovertarget="mypopover">Toggle Popover</button>
<div id="mypopover" popover>Popover Content</div>
Правила использования
1. Use title if the content in my popover is just text.
2. Use the popover attribute if the content is more than plain text and like a menu of options or something.
3. Use <dialog> if you need to force the user to make a decision or block all other interactions on the page.
К примеру, вы можете теперь реализовывать контекстные меню также просто
<button id="menu-toggle" popovertarget="menu-items">
Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
<li class="item">...</li>
<li class="item">...</li>
</ul>
Пример на 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/
Ставьте Ваши реакции и задавайте вопросы в комментариях, они помогают стать нам лучше! 🙂