css - 用于在 React 中为自定义模态添加“弹出”效果的 CSS

Question

我有一个由 Main 组件组成的页面。

Main 还包含两个组件 - NavBar 和 Body。Body 还包含两个组件 - ViewTable 和 AddPerson。在 ViewTable 组件中，我希望在单击表中的字段时加载模式。我的功能正确，但我被困在 CSS 部分。

现在，模态看起来像这样 -

我该怎么做呢？我是 React 和组件结构的新手

标签： cssreactjs

Answer 1

我可以推荐一个名为react-modal的优秀反应库。这有点难以进入，但一旦你开始工作，它就很棒。

如果您想以普通方式执行此操作，请使用position: absolute作为模态。要使过渡生效，请使用react-transition-group切换不透明度并为过渡设置动画。进入 react-transition-group 可能需要一些时间，因为乍一看有点令人困惑。