如何在 Semantic-react-ui 中的模態屏幕上顯示彈出窗口？

Question

我正在使用語義 UI 庫通過模態顯示一些內容。 模式上方有一個按鈕，單擊該按鈕后我們會看到一個提供一些信息的彈出窗口。 挑戰在於彈出窗口出現在模態屏幕后面。 我怎樣才能把彈出窗口放在模態框前面。 我嘗試了谷歌搜索，但目前沒有有效的解決方案。

我也嘗試過 z-index 。 是的，先生。我使用內聯樣式將值為 1 的 zindex 賦予模態，將值為 999 的 zIndex 賦予 Popup。 像下面這樣-

//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 庫本身可用的組件。

彈出

模態

Answer 1

 <Popup
     style={{ zIndex: 9999999 }}
 />

將 zIndex 應用於 Popup。 保持高於模態的 zIndex 保持它大於 ui-dimmers zIndex，即 99990。