Skip to content

CSS Modal

intentionally disruptive

Modals, Popups, Popovers, Lightboxes — Syntax Podcast 602

  • 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