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

Question

我制作了一个个人资料页面，当用户上传图片时，我将显示一个弹出form元素。如果我让它可见，我的body-tag 的不透明度，我会把它设置为 0.5，除了弹出表单，这就是我的问题。它的不透明度也为 0.5。

document.getElementById('uploadfoto_button').addEventListener('click', function(){
    toonUploadFoto();
});

function toonUploadFoto(){

    document.getElementsByTagName('body')[0].style.opacity = 0.5;
    document.getElementById('uploadfoto').style.visibility = "visible";
    document.getElementById('uploadfoto').style.opacity = 1;
}

#uploadfoto {
    visibility: hidden;
    z-index: 3;
    position: fixed;
    background-color: white;
    padding: 5px;
    border-radius: 5px;
    width: 600px;
    box-shadow: 3px 3px 5px black;
    margin: 5% 10%;
}

img.profiel {
    width: 200px;
    height: 200px;
    background-size: cover;
    float: left;
    position: absolute;
}

span.upload {
    position: absolute;
    background-color: rgba(0,0,0,0.3);
    width: 200px;
    height: 50px;
    cursor: pointer;
    top: 276px;
    line-height: 50px;
    text-align: center;
    z-index: 2;
}

<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" alt="Profielfoto" class="profiel"/>
<span class="upload" id="uploadfoto_button">upload image</span>

<form action="" method="POST" enctype="multipart/form-data" id="uploadfoto">
    <p>Select image:</p>
    <input type="file" name="fileToUpload" id="fileToUpload"/>
    <input type="submit" value="Upload image" name="submit"/>
</form>
    

谁能帮我？谢谢。

Answer 1

请参阅https://jsfiddle.net/7pLxnrrb/1/

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

CSS：

.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;
}

HTML：

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

JS：

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

窗体关闭时隐藏覆盖层。