CSS Modal¶

intentionally disruptive

aside has better support than dialog
dialog tag that's a sibling to the main content
blur, decrease contrast and brightness on the main when there's a de-emphasized class on the main content filter: blur(3px) contrast(0.8) brightness(0.8)
animation

Lock page scrolling under modals & menus¶

overflow: hidden

body:has(.modal[data-active="true"]) {
    overflow: hidden;   
}

React: use portals

Last update: 2023-04-24