CODEWITHSUNDEEP
javascriptreactjssemantic-ui
jatin grover
jatin grover

Reputation: 466

How to show the Popup over the Modal screen in Semantic-react-ui?

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

Modal

Upvotes: 3

Views: 2300

Answers (1)

Gaurav Bhusare
Gaurav Bhusare

Reputation: 195

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

Upvotes: 2

Related Questions