React.js 模态没有按应有的方式出现

Question

我正在处理 React.js 中关于 modals/portals 的奇怪问题。

问题是模态窗口没有在屏幕的其他元素上显示为弹出窗口。我一直在查看文档，但我无法发现我的错误。

下面的代码适用于名为“SignIn”的模式以及“App”文件。

SignIn.js

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

const SignIn =({message,isopen,onclose})=>{
  if(!isopen) return null;
  return ReactDOM.createPortal(
    <div className="modal">
      <h2>{message}</h2>
      <button onClick={onclose}>Close</button>
    </div>,
    document.body
  );
};

export default SignIn;

App.js

import SignIn from "./Components/Modal/SignIn";

const App = ()=>{

    const [currentPaneName, setCurrentPaneName]=useState("MainPane");
    const [modalOpen, setModalOpen]=useState(false);

    return(
        <React.Fragment>
            <Header onNewPaneSelected={updateCurrentPane} />
            <div>
                <SignIn 
                message="This is a test modal"
                isopen={modalOpen}
                onclose={()=>setModalOpen(false)}
                />
            </div>
            <main>
                <button onClick={()=>setModalOpen(true)}>Open Modal</button>
                <LoadPaneHandler />
            </main>
            {/* <Footer /> */}
        </React.Fragment>
    );
}

export default App;

我省略了不相关的代码，这就是为什么有些东西看起来似乎缺失了。

我运行网站的结果是这样的...

打开模态框的按钮出现，但当它被点击时，它会打开文本和关闭它的按钮在屏幕底部，而不是像模态框那样覆盖其他内容。发生这种情况时，所有其他 UI 元素都完全可用。

正如我所说，我已经多次讨论这个问题，但我无法发现我的错误。任何指针将不胜感激！

Answer 1

我发现了原因。我认为只需要 Javascript 代码就可以创建功能模式。一旦我添加了一个指定元素的 CSS 文件，例如...

位置
上/下/左/右
Background-Color（有透明度值）
等...

模态开始正常工作了！我不确定为什么我认为没有这个它也能工作，但我显然错了。

这是我用来完成这项工作的 CSS 的示例。

.modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

我还附上了工作模式的图片。请忽略丑陋的颜色，它们是我实验时的占位符。

React.js 模态没有按应有的方式出现

React.js modal not appearing as it should

javascript

modal-dialog

reactjs