Full Screen Modal Overlay

A modal is an overlay screen that appears when the user performs some action on the website. For example, You must be familiar with a window popping on many websites when you click the sign-in buttons. You are required to create something similar, but minimal.

Tasks

1. A button should be there on the screen at all times, called Show Modal. Which, when clicked, will open a modal on the screen.
2. A modal will have a black background with 50% opacity. This is called the overlay screen.
3. A modal body will have a title and a button to close the modal.
4. Clicking anywhere on the screen except for the modal body should close the modal. Clicking on the modal body SHOULD NOT close the modal.
5. Clicking on close modal button should close the modal.

Bonus Task

6. The modal should drop in from the top and exit from the bottom. (use Framer Motion or any other animation library for animations).