DEV Community

Cover image for How to Create a Pop-Up Modal in React
Nicolás Vazquez
Nicolás Vazquez

Posted on • Updated on

How to Create a Pop-Up Modal in React

What is a modal?

A modal is a box that appears on the page, blocking all functions to concentrate focus on a particular action. This is their differentiating feature, they ask the user to perform an action.
To return to the main content, the user must engage with the modal by completing an action or by closing it.

Let's create a modal with React

Code on GitHub: https://github.com/nicvazquez/react-modal
Demo: https://react-modal-nicvazquez.vercel.app/

Step 1: Create App

Let's create the React app with Vite using the following command:

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

After this, it will ask us to complete with some options:

√ Project name: ... react-modal
√ Select a framework: » react
√ Select a variant: » react
Enter fullscreen mode Exit fullscreen mode

Excellent! Now run the following commands:

cd react-modal
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

If everything went well, you should have the application created, with the dependencies installed and have the project running on a local server, which in my case is http://127.0.0.1:5173/.
Vite running React app

Step 2: Let's create the base of our application

  • Open App.jsx and create the button element. Your code should look like this:
import "./App.css";

function App() {
    return (
        <div className="container">
            <button>Open Modal</button>
        </div>
    );
}

export default App;
Enter fullscreen mode Exit fullscreen mode
  • Modify the App.css file. The styles should look like this:
.container {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode
  • Now modify index.css:
:root {
    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;
}

button {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.25s;
}
button:hover {
    border-color: #646cff;
}
button:focus,
button:focus-visible {
    outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
    button {
        background-color: #f9f9f9;
    }
}
Enter fullscreen mode Exit fullscreen mode

If we go to our local server, we should have the following:

Local server image

Step 3: Let's create the modal

  • In the src folder, let's create the components folder and inside it we need to create another folder called Modal, which should contain the Modal.jsx and modal.module.css files.

The structure of our project should look something like this:

REACT-MODAL
└─── node_modules
└─── public    
│
└─── src
│   │
│   └─── assets
│   |       react.svg
│   └─── components \ Modal
│   |        Modal.jsx
│   |        modal.module.css
|   |   App.css
|   |   App.jsx
|   |   index.css
|   |   main.jsx
│   
|   .gitignore
|   index.html
|   package-lock.json
|   package.json
|   vite.config.js
Enter fullscreen mode Exit fullscreen mode
  • To give structure to the modal, we must add the HTML to it in Modal.jsx:
import React from "react";
import styles from "./modal.module.css";

export const Modal = () => {
    return (
        <div className={styles.modalBack}>
            <div className={styles.modalContainer}>
                <div>
                    <h2>Modal</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, nisi. Dolorem est
                        esse iste perferendis.
                    </p>
                </div>
                <button className={styles.modal__closeBtn}>Close</button>
            </div>
        </div>
    );
};
Enter fullscreen mode Exit fullscreen mode
  • To style the modal, we must have this code in modal.module.css:
.modalBack {
    position: absolute;
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    background-color: rgba(0, 0, 0, 0.322);
}

.modalContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 30%;
    max-width: 60%;
    background-color: rgb(39, 43, 114);
    padding: 3rem;
    border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode
  • Let's go to App.jsx and import the Modal
import "./App.css";
import { Modal } from "./components/Modal/Modal";

function App() {
    return (
        <div className="container">
            <button>Open Modal</button>
            <Modal />
        </div>
    );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Your modal should look like this:

Modal in Local Server

So far so good, but one thing is missing... show the modal when the user clicks on the button.
Let's get to it!

Step 4: Being able to open the modal

  • Go to App.jsx and import useState:
import { useState } from "react";
Enter fullscreen mode Exit fullscreen mode
  • Let's declare the useState with the default value false:
const [showModal, setShowModal] = useState(false)
Enter fullscreen mode Exit fullscreen mode
  • Let's add the onClick function and the conditional to display the modal:
<button onClick={() => setShowModal(true)}>Open Modal</button>
{showModal && <Modal />}
Enter fullscreen mode Exit fullscreen mode
  • Our App.jsx should look like this:
import { useState } from "react";
import "./App.css";
import { Modal } from "./components/Modal/Modal";

function App() {
    const [showModal, setShowModal] = useState(false);
    return (
        <div className="container">
            <button onClick={() => setShowModal(true)}>Open Modal</button>
            {showModal && <Modal />}
        </div>
    );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Now if we click the button, the modal should appear. We are doing well, but we still need to close the modal

Step 5: Being able to close the modal

  • We must go to the Modal.jsx file and pass a prop as a parameter to close the modal.
export const Modal = ({ closeModal }) => {
Enter fullscreen mode Exit fullscreen mode
  • Put that prop as onClick event to the button of the modal:
<button onClick={closeModal} className={styles.modal__closeBtn}>
    Close Modal
</button>
Enter fullscreen mode Exit fullscreen mode
  • If we want also to close the modal when clicked outside of it, we can pass the prop to the parent div
<div onClick={closeModal} className={styles.modalBack}>
Enter fullscreen mode Exit fullscreen mode
  • Our Modal.jsx should look like this:
import React from "react";
import styles from "./modal.module.css";

export const Modal = ({ closeModal }) => {
    return (
        <div onClick={closeModal} className={styles.modalBack}>
            <div className={styles.modalContainer}>
                <div>
                    <h2>Modal</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, nisi. Dolorem est
                        esse iste perferendis.
                    </p>
                </div>
                <button onClick={closeModal} className={styles.modal__closeBtn}>
                    Close Modal
                </button>
            </div>
        </div>
    );
};
Enter fullscreen mode Exit fullscreen mode
  • Now we need to send the function as props from App.jsx for the onClick event to work
{showModal && <Modal closeModal={() => setShowModal(false)} />}
Enter fullscreen mode Exit fullscreen mode
  • Our App.jsx should finally look like this:
import { useEffect, useState } from "react";
import "./App.css";
import { Modal } from "./components/Modal/Modal";

function App() {
    const [showModal, setShowModal] = useState(false);

    return (
        <div className="container">
            <button onClick={() => setShowModal(true)}>Open Modal</button>

            {showModal && <Modal closeModal={() => setShowModal(false)} />}
        </div>
    );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Done! :-)

That was it! I hope this post has been very helpful to you. Any questions or suggestions leave it in the comments.

You can see the code on GitHub: https://github.com/nicvazquez/react-modal
Demo: https://react-modal-nicvazquez.vercel.app/

Top comments (3)

Collapse
 
bhansa profile image
Bharat Saraswat

Good start, please try with showing dynamic values on the modal and then using composition.

Collapse
 
nicvazquez profile image
Nicolás Vazquez

Thank you! I'll keep it in mind for another post :)

Collapse
 
sora0714 profile image
sora0714

Wanna work together?