jquery - 如何创建在DOM中保留为不透明度0但不会阻止内容被点击的叠加层？

我创建了一个预加载器，我想在需要时使用CSS3过渡来显示和隐藏它，但是我的问题是我的叠加层位于所有其他元素之上，从而防止它们被点击等，我想做的就是使用CSS3过渡来保持淡入淡出平滑而柔和的淡出，如果我将display: none添加到.overlay，然后将display:block添加到.overlay.is-active，则会阻止过渡效果，因此想知道如何在不依靠js淡入淡出的情况下实现此效果？另外，添加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/

最佳答案

使用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的确切值取决于您的页面。

关于jquery - 如何创建在DOM中保留为不透明度0但不会阻止内容被点击的叠加层？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18571754/