Javascript 将背景设置为不透明度0.5，弹出窗体除外

我创建了一个个人资料页面，当用户上传图片时，我会显示一个弹出的

表单

-元素。如果我把它设置为可见，我的

body

-标记的不透明度，我会将它设置为0.5，除了弹出表单，这就是我的问题。它的不透明度也为0.5

document.getElementById（'uploadfoto_按钮'）。addEventListener（'click'，function（））{
toonUploadFoto（）；
});
函数toonUploadFoto（）{
document.getElementsByTagName（'body'）[0].style.opacity=0.5；
document.getElementById（'uploadfoto'）.style.visibility=“visible”；
document.getElementById（'uploadfoto'）.style.opacity=1；
}

#上传至{
可见性：隐藏；
z指数：3；
位置：固定；
背景色：白色；
填充物：5px；
边界半径：5px；
宽度：600px；
盒影：3px 3px 5px黑色；
利润率：5%10%；
}
伊姆格·普瑞菲尔{
宽度：200px；
高度：200px；
背景尺寸：封面；
浮动：左；
位置：绝对位置；
}
span.upload{
位置：绝对位置；
背景色：rgba（0,0,0,0.3）；
宽度：200px；
高度：50px；
光标：指针；
顶部：276px；
线高：50px；
文本对齐：居中；
z指数：2；
}

上传图片
选择图像：

请参见

您可以使用覆盖div来覆盖具有高z索引的页面，并将poup的zindex设置为更高的值

CSS:

HTML:

表单关闭时隐藏覆盖图。

您可能会对显示“模式弹出”设计的内容感兴趣

.overlay
{
   position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.7);
    z-index: 100;
}

<div id='overlay' class='overlay' style="display:none;"></div>
<form style='z-index:101;'

document.getElementById('overlay').style.display = 'block';