Блог

Я пытаюсь отключить фоновую прокрутку основного текста, когда открыто модальное всплывающее окно. Я создал модал с помощью портала React. Единственный способ, которым я могу это сделать, — предоставить телу overflow-y свойство, когда модал открыт, но я не уверен, как это выполнить..

мой Modal.js выглядит примерно так

 export default function Modal({open, onClose, image, title, description}){
  if (!open) return null

  return ReactDom.createPortal(
    <>
    <div id="overlay"  />
    <div id="modal" >
      <button title={title} onClick={onClose}>close</button>
      <h3>{title}</h3>
      <img src={image} className="modal-img"/>
      {description}
    </div>
    </>,
    document.getElementById('portal')
  )
}
  

и компонент, в котором я «визуализирую» модель

 const ProjectCardUI = (props)=>{
  const[isOpen, setIsOpen] = useState(false)

  function openModal() {
    setIsOpen(true)
      // can I set the styling for '.body' or 'html' here?
  }

  return(
    
<div className="card text-center container-fluid d-flex">
  <a className="modal-click" onClick ={openModal}>this is a link</a>
  <Modal 
    open={isOpen} 
    onClose={() => setIsOpen(false)}
    title={props.cardName} 
    image={props.imgsrc}
    description={props.cardDescription}>
  </Modal>
</div>
  )
};
  

любая помощь была бы отличной.

Вы можете напрямую управлять стилем тела с помощью document объекта.

Например:

 import React from "react";
import ReactDOM from "react-dom";

export default function Test() {
  const setHidden = () => {
    console.log(document.body.style.overflow);
    if (document.body.style.overflow !== "hidden") {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "scroll";
    }
  };

  return (
    <div>     
      <button onClick={setHidden}>Click me! </button>
      <h1>1</h1>
      <h1>2</h1>
      <h1>3</h1>
      <h1>4</h1>
      <h1>5</h1>
      <h1>6</h1>
      <h1>7</h1>
      <h1>8</h1>
      <h1>9</h1>
      <h1>10</h1>
      <h1>11</h1>
      <h1>12</h1>
      <h1>13</h1>
      <h1>14</h1>
      <h1>15</h1>
      <h1>16</h1>
    </div>
  );
}
ReactDOM.render(<Test />, document.getElementById("container"));
  

Может быть, что-то вроде этого:

 const ProjectCardUI = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  function openModal() {
    setIsOpen(true);
    // can I set the styling for '.body' or 'html' here?
  }

  useEffect(() => {
    const body = document.querySelector('body');
    body.style.overflow = isOpen ? 'hidden' : 'auto';
  }, [isOpen])

  return (
    <div className="card text-center container-fluid d-flex">
      <a className="modal-click" onClick={openModal}>
        this is a link
      </a>
      <Modal
        open={isOpen}
        onClose={() => setIsOpen(false)}
        title={props.cardName}
        image={props.imgsrc}
        description={props.cardDescription}
      ></Modal>
    </div>
  );
};