Question

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

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

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

    <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}>

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

感谢您的帮助。

Answer 1

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

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

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

1 个答案: