将背景设置为不透明度0.5，除了弹出式表单

bring background on opacity 0.5 except pop-up form

本文关键字：弹出式 表单 背景 设置 不透明度      更新时间：2023-09-26

我制作了一个个人资料页面，当用户上传图片时，我将显示一个弹出的form -元素。如果我把它可见，我的body -标签的不透明度，我把它到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>

有人能帮我吗?谢谢。

参见https://jsfiddle.net/7pLxnrrb/1/

你可以使用一个覆盖div，它将覆盖页面的高z-index和设置一个更高的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';

在表单关闭时隐藏叠加

相关文章：