在reactjs中使用react-bootstrap一次顯示兩個模態時，如何在第一個模態上方和第二個模態下方顯示灰色區域？
[英]When showing two modal at a time with react-bootstrap in reactjs, how to show gray area above the first modal and below the second modal?
問題描述
我在我的反應應用程序中一次顯示兩個模態。 目前它工作正常，看起來像這樣。
但是鍵盤模態沒有正確聚焦，因為灰色區域在所有兩個模態下方。 當小模態處於活動狀態時，我想顯示大模態上方的灰色區域。 我怎樣才能做到這一點？ 我正在使用 react-bootstrap 來顯示模態。
1 個解決方案
解決方案1
0 已采納 2020-03-27 10:39:43
CSS 中的 z-index 屬性控制重疊元素的垂直堆疊順序。 z-index 值較高的元素顯示在 z-index 值較低的元素之前。 因此，在您的案例鍵盤組件中，將更多的 z-index 應用於您想要在頂部的組件。
<BigModal style={{ position: 'relative', zIndex: '1' }} />
<GrayArea style={{ position: 'relative', zIndex: '2' }} />
<TopModal style={{ position: 'relative', zIndex: '3' }} />
提交並保留第一個模態時如何關閉第二個引導模態？
[英]How to close the second bootstrap modal when submit and keep on the first modal?
使用 react-bootstrap 從 reactjs 中的模態 A 打開模態 B 后關閉模態 A
[英]Close modal A after opening modal B from modal A in reactjs with react-bootstrap
如何從 reactjs 中的異步請求中獲取數據並將其添加到 React-bootstrap Modal
[英]How to get data from async request in reactjs and add it to React-bootstrap Modal
在 reactjs 中檢查 cookie 后顯示引導模式（不使用 react-bootstrap 或類似的東西，只使用 cdn 引導）
[英]show bootstrap modal after cookie check in reactjs (not use react-bootstrap or something similar only use cdn bootstrap)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Reactjs react-bootstrap 模態“容器”屬性
使用 react-bootstrap 打開模式時出錯
提交並保留第一個模態時如何關閉第二個引導模態？
如何使用React-Bootstrap模式
如何調整模態反應引導的寬度？
如何打開和關閉反應引導模式？
使用 react-bootstrap 從 reactjs 中的模態 A 打開模態 B 后關閉模態 A
如何從 reactjs 中的異步請求中獲取數據並將其添加到 React-bootstrap Modal
在 reactjs 中檢查 cookie 后顯示引導模式（不使用 react-bootstrap 或類似的東西，只使用 cdn 引導）
Vue Bootstrap - 當第二個模態打開時隱藏第一個模態
相關標簽