Javascript 通过不改变主体中每个元素的不透明度来显示模态

我已经使用vanilla javascript创建了一个模式。以下是我所做的：

let modal=document.createElement（“div”）；
modal.id=“翻译加载程序”；
modal.style.paddingRight=“15px”；
modal.style.display=“块”；
modal.style.overflowX=“隐藏”；
modal.style.overflowY=“自动”；
modal.style.zIndex=“1072”；
modal.style.position=“固定”；
modal.style.top=0；
modal.style.left=0；
modal.style.width=“100%”；
modal.style.height=“100%”；
modal.style.outline=0
modal.classList.add（“动画”、“fadeInDown”）
让modalDialog=document.createElement（“div”）；
modalDialog.style.maxWidth=“500px”；
modalDialog.style.margin=“1.75rem自动”；
modalDialog.style.position=“相对”；
modalDialog.style.width=“自动”；
modalDialog.style.transition=“transform.3s ease out，-webkit transform.3s ease out”；
modalDialog.style.pointerEvents=“无”；
modalDialog.style.minHeight=“计算（100%-3.5rem）”；
modal.append（modalDialog）；
让modalContent=document.createElement（“div”）；
modalContent.style.position=“相对”；
modalContent.style.display=“flex”；
modalContent.style.flexDirection=“column”；
modalContent.style.width=“100%”；
modalContent.style.pointerEvents=“自动”；
modalContent.style.backgroundColor=“#fff”；
modalContent.style.backgroundClip=“padding box”；
modalContent.style.border=“1px实心rgba（0,0,0,2）”；
modalContent.style.borderRadius=“.3rem”；
modalContent.style.outline=0；
modalDialog.append（modalContent）；
让modalHeader=document.createElement（“div”）；
modalHeader.style.display=“flex”；
modalHeader.style.alignItems=“flex Start”；
modalHeader.style.justifyContent=“间距”；
modalHeader.style.padding=“1rem 1rem”；
modalHeader.style.borderBottom=“1px solid#dee2e6”；
modalHeader.style.borderTopLeftRadius=“计算（.3rem-1px）”；
modalHeader.style.borderTopRightRadius=“计算（.3rem-1px）”；
const modalHeaderElement=document.createElement（“h5”）；
modalHeaderElement.innerText=“正在进行翻译”；
modalHeaderElement.style.fontSize=“1.25rem”；
modalHeaderElement.style.fontwweight=“500”；
modalHeaderElement.style.marginTop=0；
modalHeaderElement.style.marginBottom=0；
附加（modalHeaderElement）；
modalContent.append（modalHeader）；
让modalBody=document.createElement（“div”）；
modalBody.style.position=“相对”；
modalBody.style.flex=“1 1自动”；
modalBody.style.padding=“1rem”；
modalBody.innerText=“Body”；
modalContent.append（modalBody）；
让modalFooter=document.createElement（“div”）；
modalFooter.style.display=“flex”；
modalFooter.style.flexWrap=“flex wrap”；
modalFooter.style.alignItems=“中心”；
modalFooter.style.justifyContent=“flex end”；
modalFooter.style.padding=“0.75rem”；
modalFooter.style.borderTop=“1px solid#dee2e6”；
modalFooter.style.borderBottomRightRadius=“计算（.3rem-1px）”；
modalFooter.style.borderBottomLeftRadius=“计算（.3rem-1px）”；
modalFooter.innerText=“页脚”
modalContent.append（modalFooter）；
document.body.append（模态）；
Array.prototype.forEach.call（document.body.children，（child）=>{
if（child.id！=“翻译加载程序”）{
child.style.opacity=0.1
}
console.log（child.id）；
});

这是一个示例文本..什么是sup
有几点建议：

您正在使用javascript进行大量样式设置。使用类更有效。事实上，您已经在这样做了：

modal.classList.add（“动画”、“fadeInDown”）

所有的样式都应该通过添加类来实现。删除所有
modal.style
、
modalDialog.style
和
modalContent.style
-只需添加类并将样式移动到类中（
块或外部样式表）

要显示/隐藏模式，请使用
style.display=none
和
style.display=block
。不需要使用不透明度。如果你想要一个淡出/淡出效果，有很多教程可以很容易地在谷歌上找到。这里有一个：

请注意，淡入淡出效果仅应用于最外层的div，即
modal
div。随着该div淡入淡出，内部的所有内容也将淡入淡出

下面是一个滚动您自己的模态对话框的简单示例：

最好的方法是在
模式
后面做一个
覆盖
，并使用
背景
使其
不透明度

在你的情况下，你可以通过

#translation-loader {
    background: rgba(255, 255, 255, 0.8);
}

使用
伪
元素的第二种方法


let modal=document.createElement（“div”）；
modal.id=“翻译加载程序”；
modal.style.paddingRight=“15px”；
modal.style.display=“块”；
modal.style.overflowX=“隐藏”；
modal.style.overflowY=“自动”；
modal.style.zIndex=“1072”；
modal.style.position=“固定”；
modal.style.top=0；
modal.style.left=0；
modal.style.width=“100%”；
modal.style.height=“100%”；
modal.style.outline=0
modal.classList.add（“动画”、“fadeInDown”）
让modalDialog=document.createElement（“div”）；
modalDialog.style.maxWidth=“500px”；
modalDialog.style.margin=“1.75rem自动”；
modalDialog.style.position=“相对”；
modalDialog.style.width=“自动”；
modalDialog.style.transition=“transform.3s ease out，-webkit transform.3s ease out”；
modalDialog.style.pointerEvents=“无”；
modalDialog.style.minHeight=“计算（100%-3.5rem）”；
modal.append（modalDialog）；
让modalContent=document.createElement（“div”）；
modalContent.style.position=“相对”；
modalContent.style.display=“flex”；
modalContent.style.flexDirection=“column”；
modalContent.style.width=“100%”；
modalContent.style.pointerEvents=“自动”；
modalContent.style.backgroundColor=“#fff”；
modalContent.style.backgroundClip=“padding box”；
modalContent.style.border=“1px实心rgba（0,0,0,2）”；
modalContent.style.borderRadius=“.3rem”；
modalContent.style.outline=0；
modalDialog.append（modalContent）；
让modalHeader=document.createElement（“div”）；
modalHeader.style.display=“flex”；
modalHeader.style.alignItem