我有一个全屏固定弹出窗口，可以在显示：无；之间切换。并显示：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 关注
- 60 浏览
添加回答
举报
0/150
提交
取消