score:1

Accepted answer
const MyComponent = props => {
    const popup = usePopup()
    
    return <Button onClick={e => {
            const input = await popup()
            console.log('popup closed with input: ' + input)
        }/>
}

score:0

import React, { useEffect } from "react";
import { render, unmountComponentAtNode } from "react-dom";

const overlay = {
  top: "0",
  height: "100%",
  width: "100%",
  position: "fixed",
  backgroundColor: "rgb(0,0,0)"
};

const overlayContent = {
  position: "relative",
  top: "25%",
  textAlign: "center",
  margin: "30px",
  padding: "20px",
  backgroundColor: "white"
};

let rootNode;
let containerNode;

function Modal({ children }) {
  useEffect(() => {
    return () => {
      if (rootNode) {
        rootNode.removeChild(containerNode);
      }

      containerNode = null;
    };
  }, []);

  function unmountModal() {
    if (containerNode) {
      unmountComponentAtNode(containerNode);
    }
  }

  return (
    <div style={overlay}>
      <div style={overlayContent}>
        {children}
        <button onClick={unmountModal}>Close Modal</button>
      </div>
    </div>
  );
}

/* additional params like props/context can be passed */
function renderModal(Component) {
  if (containerNode) {
    return;
  }

  containerNode = document.createElement("div");
  rootNode = document.getElementById("root");
  containerNode.setAttribute("id", "modal");
  rootNode.appendChild(containerNode);

  render(<Modal>{Component}</Modal>, containerNode);
}

const App = () => {
  const ModalBody = <p>This is a modal</p>;

  return (
    <div>
      <button onClick={() => renderModal(ModalBody)}>Open Modal</button>
    </div>
  );
};

render(<App />, document.getElementById("root"));

score:0

const Popup = (props) => {
  return(
    <div style={{zIndex:props.open?"-100":"100", transition: `all ${props.timeout / 
         1000}s`, opacity: props.open?1:0}}>
        {props.children}
    </div>
  )
}

score:2

 <Button onClick={() => { popup("text within modal", {type: "info", timeout: 1000}); }}>
    this opens a modal
 </Button>

Related Query

More Query from same tag