Easy
·
45 minutes

Prompt

Create a dismissible modal overlay. The UI should initially show a 'Show offer' button which, when clicked, displays an overlay resembling the mockup below, including a transparent grey overlay over the background. The modal should be vertically and horizontally centered, and always in the same position regardless of scrolling.

If the user clicks anywhere on the grey background or the 'x', the modal should be dismissed and the UI should again just show the 'Show offer' button. However, if the user clicks the 'Accept offer' button, the modal will dismiss and the UI should now show the text "Offer accepted".

Submitting solutions

  1. Create a solution by forking one of our CodePen templates:
  2. Submit your solution here

Hints

Additional challenges

Get future questions delivered straight to your inbox for free

Sign up and receive instant access to new questions when we publish them.

We‘ll only use your information to deliver new questions and to provide you updates about our product. We‘ll never spam you or sell your information without your consent. Unsubscribe at any time.