JQuery检查div是否显示flex并将body溢出设置为hiden

Question

我有一个弹出窗口，我想在间隔中检查它。一旦它的CSSdisplay设置为flex/或block，body的overflow就应该设置为hidden，因为我不想滚动，因为它是一个长表单。

function checkPopup() {
if ($(".bdp-poup").css("display", "flex")) {
$('.body').css('overflow', 'hidden');
} else {
$('.body').css('overflow', 'auto');
}
}
setInterval(checkPopup, 1000);

Answer 1

您应该组合两个函数：

1. 保存元素显示属性状态，然后每隔一段时间检查此属性是否已更改
2. 检查元素属性是否显示为flex或none，并将此函数调用到第一个函数中

var myElement = $(".bdp-poup");
var originalDisplay = myElement.css("display");
// Check for changes to the display property
setInterval(function() {
if (myElement.is(":visible") && myElement.css("display") !== originalDisplay) {
console.log("Display property has changed to " + myElement.css("display"));
checkVisibility();
originalDisplay = myElement.css("display");
}
}, 100);

// Check if display flex or none
function checkVisibility() {
if (myElement.css("display") == "flex") {
// Element has display: flex
} else if (myElement.css("display") == "none") {
// Element has display: none
} else {
// Element has a different display value
}
}

.bdp-poup {
display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bdp-poup">
Lorem ipsum
</div>