Hey fellow creators,
Let's create an awesome modal with React!
If you prefer to watch the video version, it's right here :
Here's the source code for you.
Let's start building!
1. Create your component.
In the Modal.js file, create a component that'll use useState.
Add a const with modal and setModal, making sure the state is false to begin with, so that the modal doesn't show upon opening the website.
import React, { useState } from "react";
import "./Modal.css";
export default function Modal() {
const [modal, setModal] = useState(false);
return (
<>
</>
);
}
2. Create a button that'll trigger the pop-up.
Add a button inside of the return, with an onClick parameter that'll trigger the function we'll create in a second.
return (
<>
<button onClick={toggleModal} className="btn-modal">
Open
</button>
</>
);
Here's the function: when you click on the button, it'll change the state from false to true or the other way around.
const toggleModal = () => {
setModal(!modal);
};
3. Create the modal.
Create the content of your modal with the appropriate classnames for your css and make sure not to forget to add the onClick functions that'll trigger the opening or closing of your modal.
<div className="modal">
<div onClick={toggleModal} className="overlay"></div>
<div className="modal-content">
<h2>Hello Modal</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
perferendis suscipit officia recusandae, eveniet quaerat assumenda
id fugit, dignissimos maxime non natus placeat illo iusto!
Sapiente dolorum id maiores dolores? Illum pariatur possimus
quaerat ipsum quos molestiae rem aspernatur dicta tenetur. Sunt
placeat tempora vitae enim incidunt porro fuga ea.
</p>
<button className="close-modal" onClick={toggleModal}>
CLOSE
</button>
</div>
</div>
4. Render the modal conditionally.
Add the curly brackets and your condition so that the modal only shows if the state is true (that is, if you've clicked on the "open" button).
{modal && (
<div className="modal">
<div onClick={toggleModal} className="overlay"></div>
<div className="modal-content">
<h2>Hello Modal</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
perferendis suscipit officia recusandae, eveniet quaerat assumenda
id fugit, dignissimos maxime non natus placeat illo iusto!
Sapiente dolorum id maiores dolores? Illum pariatur possimus
quaerat ipsum quos molestiae rem aspernatur dicta tenetur. Sunt
placeat tempora vitae enim incidunt porro fuga ea.
</p>
<button className="close-modal" onClick={toggleModal}>
CLOSE
</button>
</div>
</div>
)}
Now as you can see, there are two ways for you to close the modal:
- either by clicking on the close button of course.
- or by clicking on the overlay.
One last thing! Imagine there's a text below your "open" button. For a better user experience, you don't want this long paragraph to scroll down when the modal is open. To prevent that, you need to add a condition so that if the modal is opened, then the scrolling will not be possible:
body.active-modal {
overflow-y: hidden;
}
if(modal) {
document.body.classList.add('active-modal')
} else {
document.body.classList.remove('active-modal')
}
Try with the full code and you'll see by yourself that it's now fixed! Make sure to check out the CSS file as well.
Have fun experimenting and make sure to check out my other tutorials!
Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool
See you soon!
Enzo.
Top comments (5)
The problem with this modal, and so many others is that it is still possible to use whatever is underneath the modal. I see very few 'modal' implementations that actually get this right
Well, if you click on the overlay it'll close the modal.
If you are talking about navigating with "tab", we could listen a keypress event while the modal is open to shut it off if someone press tab. :)
Yup, I was referring to tabbing. Most modal implementations I see do not account for the fact you can tab onto page elements that are underneath the 'blocking' div, and continue using those elements with the keyboard. It's possible to get sites into all kinds of 'unexpected' states like this. A correctly implemented modal will truly block access to anything 'underneath' until it's closed in the expected way.
You should publish a list of these common mishaps. A cheat sheet of sorts.
that was what i wanted ; thank you a lot