javascript动态创建覆盖背景

我有一个功能，当点击时，会将div容器放在屏幕中央，并用固定位置和z索引2放大。我想动态创建一个元素，将z-index设为1，位于div下面，背景为黑色，部分透明，隐藏了主要内容。如何在页面中创建并放置此元素，然后将其删除？

• 此演示具有加载在窗口onload事件（

  #overlay

  ）上的on overlay
• 在

  #overlay

  中有一个密码输入（

  #pass

  为“off”）

• #overlay

  将使用

  classList

  在输入密码后将其类更改为

  。关闭

  ，从而使

  #overlay

  不存在（

  显示：无

  ）

var ov=document.getElementById（'overlay'）；
var ps=document.getElementById（'pass'）；
ps.addEventListener（“变更”，功能（e）{
if（pass.value==“off”&&ov.classList.contains（'on'））{
ov.classList.add（'off'）；
ov.classList.remove（'on'）；
}否则{
警报（“密码不正确”）；
}
}，假）；
函数init（）{
ov.classList.add（'on'）；
}
window.onload=init
#覆盖{
位置：固定；
排名：0；
左：0；
背景：rgba（0,0,0,0.6）；
z指数：1；
宽度：100%；
身高：100%；
指针事件：无；
}
.内容{
边框：3倍纯红；
宽度：400px；
高度：200px；
保证金：50px自动；
填充：10px；
}
p{
字体：600 16px/1.428“Arial”边距：0 0 15px 10px；
}
#通过{
指针事件：自动；
宽度：100px；
线高：20px；
文本对齐：居中；
利润率：25%自动0；
显示：块；
}
.关{
显示：无；
}
.在{
显示：块；
}

xxxxxxxxxxxxxxxxxxxxxxxxxx

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


我有一个函数，当单击时，它会将div容器置于屏幕中央

由于您正在这样做，您对它有了更多的控制，所以您只需将这部分html与您的div一起添加。（您的div和此新div必须包装在父div中）

HTML

这应该是将div居中至屏幕中心时的结构。将此结构附加到body标记将获得所需的结果

<div class="overlay-parent">
  <div class="overlay"></div>
  /* your div */
</div>

.overlay-parent{
    width:100%;
    height:100%;
    overflow:hidden;
 }
.overlay{
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
  background-color: black;
  opacity:0.3;
 }