I am using Semantic UI library to show some content over the Modal. There is a button over the Modal upon which after clicking we see a popup giving some info. The challenge is that the popup appear behind the Modal screen. How can I bring the popup up in front of the Modal. I tried Googling but no solution is effective at the moment.
I did try z-index as well. Yes Sir.I used inline style to give zindex of value 1 to the modal and zIndex of value 999 to the Popup. Like here below-
//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>
Unfortunately it did not work. :(
NOTE- Both the Modal and the Popup are the components available from Semantic UI library itself.
<Popup
style={{ zIndex: 9999999 }}
/>
Apply zIndex to Popup. to keep that higher than modal's zIndex keep it greater than ui-dimmers zIndex which is 99990.