html - 基礎となる 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);
}

absoluteの代わりに、 fixedを置くことができます