我有一個全屏固定彈出窗口，可以在顯示：無；之間切換。并顯示：flex；。當我的彈出窗口設置為顯示時，我希望能夠選擇正文標簽：flex; 以禁用彈出窗口后面的滾動。因此，類似于“如果 popup = display: flex; then body = Overflow: hide;”我怎樣才能用一點 JS 或 Jquery 來做到這一點？或者如果有更好的方法，我愿意接受建議。這是我用來打開彈出窗口的代碼：JS：<script type="text/javascript"> <!-- function toggle_visibility(id) { event.preventDefault(); var e = document.getElementById(id); if(e.style.display == 'flex') e.style.display = 'none'; else e.style.display = 'flex'; } //--> </script>HTML：<a href="#" onclick="toggle_visibility('id-of-popup');">Clickable item to open the Popup</a>
2 回答
慕桂英3389331
TA貢獻2036條經驗 獲得超8個贊
我會更改您的代碼以使用類。添加包含以下內容的樣式表：
.popup { display: none; }
.popup.show { display: flex; }
.popup-shown { overflow: hidden; }
然后改變你的 JavaScript 以利用這些：
function toggle_visibility(id) {
? ? event.preventDefault();
? ? var e = document.getElementById(id);
? ? e.classList.toggle('show');
? ? document.body.classList.toggle('popup-shown');
}
我假設你的彈出窗口在這里得到“popup”類。
這利用了classList現代瀏覽器上可用的界面，特別是不包括 Internet Explorer。
慕標琳琳
TA貢獻1830條經驗 獲得超9個贊
因此，首先，您需要使用 querySelecor 獲取彈出元素。假設彈出窗口有一個 id，您將執行以下操作：
var element = document.getElementById(popup_id_here);
然后。您可以獲得元素的計算樣式。使用這個：
var style = getComputedStyle(element);
現在，您可以檢查顯示器是否為柔性的：
if(style.display == "flex") ......
將樣式應用到身體上
document.body.style.overflow = "hidden";
- 2 回答
- 0 關注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消