javascript - 除 Angular 4 的输入外，所有页面上都有阴影

Question

我有一个带输入的 Angular 4 应用程序，我想在单击它时专注于此输入。所以我想使除焦点输入之外的所有页面变暗。所以我尝试添加一个黑色背景和 50% 不透明度的 div。

但是输入总是低于 div 而它的 z-index 更高。

这是我的 html 代码:

<router-outlet></router-outlet>
<div id="blanket"></div>

毯子的CSS代码:

#blanket {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.5;
  z-index: 100;
  visibility: hidden;
}

在组件中:

<input type="text" class="form-control" style="z-index: 2000000 !important;background-color: #fff" (focus)="focusOnInputName()" (blur)="blurOnInputName()" >

还有两个函数:

focusOnInputName(){
    console.log('focus');
    let d = document.querySelector('#blanket');
    this.renderer.setStyle(d, "visibility", "visible");

}

blurOnInputName(){
    console.log('blur');
    let d = document.querySelector('#blanket');
    this.renderer.setStyle(d, "visibility", "hidden");
}

当聚焦或模糊时，blanket div 出现或消失，但输入始终被“blanket”隐藏。

我该怎么做才能得到我想要的？

编辑 我想做与 Bootstrap 模态相同的事情，但要单击输入。

Answer 1

只需将 position: relative 添加到输入元素即可。

.container {
  position: relative;
  width: 500px;
  height: 200px;
  top: 10px;
  left: 50px;
  border: #00f solid 2px;
}
.container input {
  z-index: 2;
  position: relative; /* Add this */
}
.blanket {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0,0,0,0.6);
}

<div class="container">
  <p>Some text</p>
  <p>Some other text</p>
  <input placeholder="Type something"/>
  <p>Some more text</p>
</div>

<div class="blanket"></div>