HomeChallengesRepsProblemsLeaderboardTake a challenge

Modal Dialog

Create a modal with overlay, close button, and smooth transitions.

Advanced10 min on the clock8 graded checks · 100 pointsComponent BuilderPro
Graded by reading your code against the checklist below.

What you build

    How it is graded

    Published in full, before you start — every point is one of these and there is nothing else.

    1. Use fixed or absolute positioning+15CSS layout
    2. Use inset for the overlay+15CSS layout
    3. Add background opacity+15Visual polish
    4. Use z-index+10CSS layout
    5. Add a transform+15Interaction and motion
    6. Add shadows+10Visual polish
    7. Use Flexbox to centre the dialog+10CSS layout
    8. Add transitions+10Interaction and motion

    What it teaches

    Interaction and motionbeginner

    A :hover style tells the user something is clickable, and a transition stops that change from snapping — together they are the cheapest way to make a page feel built rather than assembled.

    The rest of Component Builder