加载掩码，禁用基础html元素

Question

我想为所有页面创建加载器掩码。我需要让掩码下的元素不可用。但现在我可以点击按钮。你可以在图像上看到所有内容。

这是面具的css：

div#mask {
    z-index:9999;
    display: none;
    width:100%;
    background-color: rgba(0,0,0,0.15);
}

它的宽度为100％，窗口高度为div。如何修复ui阻止？

Answer 1

你还没有这样说：

position: absolute;

Answer 2

您必须将其放置在绝对位置并设置高度。所以这很好用：

<style>

div.mask {
    position:           absolute;
    z-index:            1;
    top:                0;
    left:               0;
    width:              100%;
    height:             100%;
    background-color:   rgba(0,0,0,0.15);
}

</style>

<a href="">Can't be clicked</a>

<div id="mask" class="mask"></div>

Answer 3

查看pointer-events: none; CSS规则

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Answer 4

div.mask
{
    position:           fixed;
    z-index:            1;
    top:                0;
    left:               0;
    width:              100%;
    height:             100%;
    background-color:   rgba(0,0,0,0.15);
}

而不是绝对，您可以将修复