Angular、CSS、HTML：添加禁用整个 DOM 的背景，弹出组件除外

Question

我正在寻找一种方法来在我的整个 DOM 上放置一个阴影层，禁用其中的任何控件（按钮、链接等），在弹出 window 下方, 只要用户点击一个按钮。

我只想显示一个登录表单，在按下登录按钮后，它将在屏幕中间的面板中弹出，用户不应该能够访问该网站的任何其他部分页面，在登录表单旁边。

登录按钮是位于我的导航栏内的一个组件，它是另一个组件。整个 Web 应用程序由 3 个主要组件组成：导航栏（菜单和登录按钮所在的位置）、正文（Web 应用程序内容动态变化的位置）和页脚（它只是……一个页脚！）

非常感谢！！

Answer 1

只需使用这些 css:

为您的弹出窗口添加一个容器

.container {
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin:auto;
      background-color:rgba(0,0,0,0.3);
      z-index:99999;
    }

这是一个例子：

*{box-sizing:border-box;}
.container {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  background-color:rgba(0,0,0,0.3);
   z-index:99999;
}
.pop-up {
  position:absolute;
  width:90%;
  max-width:250px;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
  background-color:#fff;
  padding:20px;
}
input {
  width:100%;
  margin-bottom:5px;
  display:block;
  }

<div class="container">
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
 this is content of the web <br />
</div>
<div class="container">
  <div class="pop-up">
    <input type="text" placeholder="user">
    <input type="password" placeholder="password">
    <input type="submit" value="log in">
  </div>
</div>

Angular、CSS、HTML：添加禁用整个 DOM 的背景，弹出组件除外

Angular, CSS, HTML: Adding a backdrop that disable the whole DOM excepts for the popped up component

html

css

typescript

angular-material

angular