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.
Show Modal
. Which, when clicked, will open a modal on the screen.50% opacity
. This is called the overlay screen.title
and a button
to close the modal.close modal
button should close the modal.Click to reveal
Can you use useState()
in react to conditionally show
and hide
components?
Click to reveal
An overlay
is nothing but a div
element which is position: absolute
in nature.
Click to reveal
Top stop closing of the modal on the modal body, use event.stopPropagation()
to stop the event from propagating to the div from where it was called.