Как показать всплывающее окно поверх модального экрана в Semanti c -react-ui? - PullRequest
Новая
       9

Как показать всплывающее окно поверх модального экрана в Semanti c -react-ui?

2 голосов
/ 22 января 2020

Я использую библиотеку пользовательского интерфейса Semanti c, чтобы показывать содержимое поверх модального режима. Над модалом есть кнопка, на которой после нажатия мы видим всплывающее окно, дающее некоторую информацию. Проблема в том, что всплывающее окно появляется за модальным экраном. Как я могу вызвать всплывающее окно перед модалом. Я пробовал поиск в Google, но в настоящее время не существует эффективного решения.

Я также попробовал z-index. Да, сэр. Я использовал встроенный стиль, чтобы дать zindex значения 1 модальному значению и zIndex значения 999 всплывающему окну. Как здесь ниже - 

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

К сожалению, это не сработало. : (

ПРИМЕЧАНИЕ. Модальные и всплывающие окна - это компоненты, доступные в самой библиотеке пользовательского интерфейса Semanti c.

Всплывающее окно

Модальные

1 Ответ

2 голосов
/ 22 января 2020 
 <Popup
     style={{ zIndex: 9999999 }}
 />

Применить zIndex к Popup. чтобы он был выше, чем у zIndex модала, держите его больше, чем у ui-dimmers zIndex, который равен 99990.

...