#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/modal-system-design/backdrop-and-closing

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░███████████████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/modal-system-design/backdrop-and-closing

Repovive

Backdrop and Closing - Modal System Design | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Backdrop and Closing

Click-outside behavior

The backdrop provides context and an optional close trigger.

Backdrop options:

Click to close (common)
Click does nothing (for important dialogs)
Transparent vs visible

Implementation:

<div className="backdrop" onClick={handleBackdropClick}>
  <div className="modal" onClick={e => e.stopPropagation()}>
    {children}
  </div>
</div>

stopPropagation: Prevents clicks inside modal from closing it.

Accessibility: If backdrop closes modal, ensure Escape also works for keyboard users.