0

CSS3トランジションを使用して、必要に応じて表示および非表示にするプリローダーを作成しましたが、オーバーレイが他のすべての要素の上にあり、クリックできないなどの問題があります。フェードイン アウト フェード アウト スムーズでdisplay: noneソフトdisplay:block。.overlay.is-activeまた、追加pointer-events: noneすると少しは役立ちますが、広くサポートされておらず、閉じるボタンをクリックできなくなります。

CSS

.overlay,
.loading {
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}

.overlay {
   background: rgba(0,0,0,.6);
   position: fixed;
   /* display: none; */
   opacity: 0;
   -webkit-transition: opacity .3s;
}

.overlay.is-active {
    /*display: block;*/ 
    opacity: 1;
}

.close {
    width: 30px;
    height: 30px;
    background: grey;
    color: white;
    text-align: center;
    display: block;
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 200;
}

.loading {
    position: absolute;
    color: white;
    text-align: center;
}

JSFiddle: http://jsfiddle.net/ejnpP/3/

4

2 に答える 2

1

これは、z-index で修正できます。

.overlay {
    background: rgba(0,0,0,.6);
    position: fixed;
    opacity: 0;
    -webkit-transition: opacity .3s;
    z-index: -1;
}

.overlay.is-active {
    opacity: 1;
    z-index: 99;
}

または、javascript を使用して ontransitionend リスナーを追加し、オーバーレイの遷移が終了したときに display:none プロパティを設定することもできます。

http://jsfiddle.net/jonigiuro/ejnpP/5/

于 2013-09-02T11:13:19.340 に答える
1

z-index を使用すると、オーバーレイを他の要素の下にプッシュしたり、要素の上に戻したりできます。フィドル: http://jsfiddle.net/ejnpP/4/

.overlay {
   background: rgba(0,0,0,.6);
   position: fixed;
   opacity: 0;
   -webkit-transition: opacity .3s;
   z-index: -1;
}

.overlay.is-active {
    opacity: 1;
    z-index: 10;
}

z-index の正確な値はページによって異なります。

于 2013-09-02T11:12:33.197 に答える