- Add class only present when modal is opened like
<div class="modal-opened">
- Prevent scrolling when modal is opened with CSS:
html body:has(.modal-opened) { overflow: hidden; }
- On modal open the scrollbar will disappear and cause a small layout shift. The easiest way to avoid this is using
scrollbar-gutter
. With this the page always reserves spacing for scrollbar even if the page doesn't need it.
html {