高 z-index 将元素放在其他元素前面，但让单击它们

Question

在我的角度项目中，我添加了来自

aitboudad/ngx-loading-bar

的 ngx-loading-bar（我安装了 http-client 包），这是我的 app.component.html:

<div class="main-comp">
    <ngx-loading-bar [color]="'#74ffff'" [includeSpinner]="false" [height]="'3px'" ></ngx-loading-bar>

    <header>
       ...header content...
    </header>
    <main id="main-content">
        <router-outlet></router-outlet>
    </main>
    <footer id="footer-content">
      ...footer content...
    </footer>
</div>

现在我需要添加一个黑色全屏元素来阻止用户在加载程序出现时按下任何按钮。我使用了以下 scss 代码：

::ng-deep{
    .ngx-bar{
        z-index: 100;
        &::after{
            content: "";
            display: block;
            width: 100vw;
            height: 100vh;
            background-color: #00000066;
            position: fixed;
            top: 0;
            left: 0;
        }
    }
}

这确实在屏幕中的所有元素前面显示了半不透明的黑色 div，但不幸的是 - 这并不能阻止点击元素！即使我将颜色更改为完全

black

或任何不透明颜色 - 我仍然看到光标更改为指针并在这种情况下单击 - 导致操作和 http 请求。

有什么问题吗？我尝试提供高 z-index，并将位置从

fixed

更改为

absolute

- 没有帮助。我还怀疑这可能是伪元素问题，所以我删除了

::after

并尝试为加载器 div 本身提供完整大小 - 相同的结果！

我将不胜感激任何建议！

Answer 1

将我的评论作为答案，我认为问题是

:after

选择器没有按您的预期工作。您可以了解有关后选择器的更多信息这里

基本上，要达到您想要的结果，您可以将

ngx-loading-bar

组件包装在 div 上并使用类设置样式。

CSS

.loadbar-bg {
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: #00000066;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}

HTML

<div class="main-comp">
    <div class="loadbar-bg" >
        <ngx-loading-bar [color]="'#74ffff'" [includeSpinner]="false" [height]="'3px'" ></ngx-loading-bar>
    </div>

    <header>
       ...header content...
    </header>
    <main id="main-content">
        <router-outlet></router-outlet>
    </main>
    <footer id="footer-content">
      ...footer content...
    </footer>
</div>