css Question posted in
Some basic documentation can be found here.

Css – Modal is not opening in React

I tried to build a modal using React but it is not working. The modal does not open when I click on the open button. I tried to search for this problem but did not get any results.

I used useState to control the appearance of my modal. When it’s true, it should show the results, else it shouldn’t show the results.

I don’t know where the problem is in my code.
This is the code for the Modal component.

Modal.jsx:

import React, { useState } from "react";
import "./Modal.css";

export default function Modal() {
    const [modal, setModal] = useState(false);

    const toggleModal = () => {
        setModal(!modal);
    };

    return (
        <div>
            <button onClick={toggleModal} className="btn-modal">
                Open Modal
            </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>
            )}
        </div>
    );
}

Modal.css

body.active-modal {
    overflow-y: hidden;
}

.btn-modal {
    padding: 10px 20px;
    display: block;
    margin: 100px auto 0;
    font-size: 18px;
}

.modal, .overlay {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
}

.overlay {
    background: rgba(49,49,49,0.8);
}
.modal-content {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.4;
    background: #f1f1f1;
    padding: 14px 28px;
    border-radius: 3px;
    max-width: 600px;
    min-width: 300px;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 7px;
}
Tags:

2

Answers


  1. 0

    Maybe use useRef instead of useState.

    import React, { useState, useRef } from "react";
 
const modal = useRef(null);

function toggleDialog(){
        if(!modal.current){
            return;
        }
        modal.current.hasAttribute("open")? modal.current.close() : modal.current.showModal();
    }

    It worked for my dialog. Let me know how it goes. Here’s the video I learned this from:
    https://www.youtube.com/watch?v=YwHJMlvZRCc

    Login or Signup to reply.
  2. 0

    I sometimes have issues with updating state by referencing the destructured state variable rather than passing a setter function. Try this:

      const toggleModal = () => {
      setModal((modal) => !modal);
  };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search