如何调暗网页以将注意力集中在横幅上？(对您网页的暗淡效果)

Question

我想知道在某些网页中如何创建这种效果:

在加载网页时,带有关闭按钮的横幅广告显示为最顶层,实际网页显示为下层; 网页完全变暗,因此注意力的焦点自然落在横幅广告上,并带有关闭按钮.点击广告中的关闭按钮,会立即显示实际网页,但现在又恢复到原来的亮度.

嗯,这只是一个例子,我知道这种展示广告的做法令人厌烦.

我的问题是 - 你如何在你的网页上获得暗淡和明亮的效果？

PS:

1. 我知道css中的z-index,所以我只需要知道调光部分.
2. 我正在寻找一个基于CSS的解决方案(或者重新说明,解决方案,不使用任何脚本,如js),如果可能的话.

多谢你们.

Answer 1

像这样的东西？非常少的脚本.

HTML

<div class="overlay"></div>
<div class="overlay-message">
    <p>CLICK TO CLOSE</p>
</div>

jQuery的

$(document).ready(function() {
    $(".overlay, .overlay-message").show();

    $(".overlay-message").click(function() {
        $(".overlay, .overlay-message").hide();
    });
});

CSS

.overlay {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#fff;
    opacity:0.8;
    z-index:1001;
}
.overlay-message{
    position: fixed;
    top:30px;
    left:30px;
    width:400px;
    height:250px;
    background-color:#fff;
    opacity:1;
    z-index:1002;
}