david-abell / modal-overlay

Modal-overlay

A simple modal overlay built using html, css and javascript.

Test it out on the demo page https://david-abell.github.io/modal-overlay/

Why I built this

Exercise project to showcase practical front end skills.

Project design goal

Create a dismissible modal overlay.

• The UI should initially show a 'Show offer' button which, when clicked, displays an overlay dialogue, and 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.

• If the user clicks the 'Accept offer' button, the modal will dismiss and the UI should now show the text "Offer accepted".

Source

Project design goal source: Front end eval