Skip to content

CSS Modal

  • 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;   
}
Last update: 2023-03-20