При отображении двух модальных одновременно с response- bootstrap в reactjs, как отобразить серую область над первым модальным и под вторым модальным?

Question

Я показываю два модальных за раз в моем приложении реакции. В настоящее время он работает нормально и выглядит следующим образом.

Но модальная клавиатура не сфокусирована должным образом, потому что серая область находится ниже всех двух модальных мод. Я хочу показать серую область над большим модальным, когда маленький модальный активен. Как мне этого добиться? Я использую response- bootstrap, чтобы показать модалы.

Answer 1

Свойство z-index в CSS управляет вертикальным порядком расположения элементов, которые перекрываются. Элементы с более высоким значением z-index отображаются перед элементами с более низким значением z-index. Поэтому примените больше z-index к компоненту, который вы хотите сверху в вашем случае Keyboard Component.

 <BigModal style={{ position: 'relative', zIndex: '1' }} />

 <GrayArea style={{ position: 'relative', zIndex: '2' }} />

 <TopModal style={{ position: 'relative', zIndex: '3' }} />