javascript - 如何在 Semantic-react-ui 的模态屏幕上显示弹出窗口?

标签 javascript reactjs semantic-ui

我正在使用语义 UI 库在模态上显示一些内容。
模态上方有一个按钮,点击后我们会看到一个提供一些信息的弹出窗口。
挑战在于弹出窗口出现在模态屏幕后面。
我怎样才能在 Modal 前面弹出弹出窗口。我试过谷歌搜索,但目前没有有效的解决方案。

我也尝试过 z-index。
是的先生。我使用内联样式将值 1 的 zindex 赋予模态,将值 999 的 zIndex 赋予弹出窗口。像下面这样-

//Modal.js
render(){
<Modal style={{zIndex:1}}>
          <MyComponent />
</Modal>
}

//MyComponent.js
render(){
<Popup
       trigger={<Button> Click Me! </Button>
       style={{zIndex:999}}>
<Popup.Content>
     Hi There. I am Popup content
</Popup.Content>

不幸的是它没有奏效。 :(

注意- Modal 和 Popup 都是语义 UI 库本身提供的组件。

Popup

Modal

最佳答案

 <Popup
     style={{ zIndex: 9999999 }}
 />
将 z 索引应用于弹出窗口。保持高于模态 z Index 保持它大于 ui-dimmers zIndex,即 99990。

关于javascript - 如何在 Semantic-react-ui 的模态屏幕上显示弹出窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59856683/

相关文章:

javascript - 无法将切换值从事件更改为不活动

javascript - 带有 Mono Repo 的 react-scripts 的 testPattern --config=jest.config.js 无效

javascript - 将抽屉元素放置在菜单底部

javascript - 单击时向图像映射部分添加颜色轮廓(jQuery)

javascript - requestAnimationFrame 带有回调函数?

javascript - 有没有比 `const` 更好的方法来存储大块文本?

javascript - 类型错误 : Cannot read property 'exists' of undefined

javascript - 语义用户界面 : Access search component selected item

javascript - Draft.js 's RichUtils.toggleInlineStyle doesn' 工作

javascript - 如何限制在 ngFor 中显示的项目数量?