26

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

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

好吧,这只是一个例子,我知道这种展示广告的做法令人讨厌。

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

PS:

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

多谢你们。

4

2 回答 2

29

这样的东西?非常少的脚本

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;
}

.overlay {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#fff;
    opacity:0.8;
    display:block;
    z-index:1001;
}
.overlay-message{
    position: fixed;
    top:30px;
    left:30px;
    width:400px;
    height:250px;
    background-color:#eee;
    border:1px solid #000;
    opacity:1;
    z-index:1002;
    box-sizing:border-box;
    padding:100px 50px;
}

.overlay-message:hover { 
    cursor:pointer; 
}
<div class="overlay"></div>
<div class="overlay-message">
    <p>CLICK TO CLOSE</p>
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $(".overlay, .overlay-message").show();
    
    $(".overlay-message").click(function() {
        $(".overlay, .overlay-message").hide();
    });
});
</script>

于 2011-05-13T17:16:12.407 回答
4

您可以使用 CSS 和 opacity 中的 :target 选择器来做到这一点,但大多数浏览器都不提供这两种选择器。

相反,您将不得不使用 javascript 来显示暗色框。

通常,您会使用绝对定位的 100% 宽度和高度框,其背景颜色为 rgba,并带有透明 png 后备。

像这样设计它会起作用:

#dim {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background: url('semitransparent1x1.png');
    background: rgba(0, 0, 0, 0.8);

    z-index:100;
}

然后使用一些简单的 jQuery 来显示和删除它。

于 2011-05-13T18:24:07.020 回答