时间戳

首页 > 解决方案 > 如何创建没有任何覆盖的 React Modal？

reactjs - 如何创建没有任何覆盖的 React Modal？

问题描述

我正在为我的网站使用 React 和 Semantic UI，并且我希望创建一个模式弹出窗口以在页面上提供一些操作项。

目前，使用 Semantic 的 Modal，您必须在三个调光器选项（默认、倒置和模糊）之间进行选择。就我而言，我希望弹出窗口出现，但我不希望有任何覆盖。模型后面的页面应该正常显示。奇怪的是，这并不容易/显而易见。

在我的页面上，我有以下示例模型代码。

    <Modal dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
      <Modal.Header>Select a Photo</Modal.Header>
      <Modal.Content image>
        <Modal.Description>
          <p>Some contents.</p>
        </Modal.Description>
      </Modal.Content>
    </Modal>

这三个选项（默认、反转和模糊）显然不起作用。

我尝试使用样式将背景颜色设置为透明和其他选项，但似乎没有任何效果。

  <Modal style={{backgroundColor: "transparent"}} dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>

我知道这里必须有一个简单的解决方案..它是什么？

谢谢你的帮助。

标签： reactjssemantic-ui

解决方案

过去可以设置dimmer={false}，但根据文档已弃用（请参阅下面的链接），您需要使用样式以使其透明，因此您的解决方案接近您需要做的。如果你检查渲染的 Modal，你会发现你需要重写css 类background-color的。.ui.dimmer您应该能够在组件的样式表中做到这一点。

https://github.com/Semantic-Org/Semantic-UI-React/pull/2882

推荐阅读