Reveal

Basics

A modal should open in the center of the page when either of these links are clicked.

Clicking any of these triggers should close the modal.

Clicking on the overlay should close the modal.

Nested

Clicking this link should open the initial modal.

Clicking this link should replace this modal with a new one.

Clicking this link should close this modal, but not go back to the first one.

With Offsets

Clicking this link should open a reveal with offset 50, 50 from top/left

Am I in the top left?

Slower fade in

Clicking this link should open a reveal fading in slow

Did I open slower? Did the overlay also open slow?

Faster fade in

Clicking this link should open a reveal fading in fast

Did I open faster? Did the overlay also open fast?

Multiple opened

Each link should open a separate modal.

Modal 1 - Now click the other one.

Modal 2 - Now click the other one.

Eventlistener for anchor

When triggering the modal with the keyboard (space or enter) it should change content.

Open modal

Something went wrong