加载掩码，用于禁用基础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