26

この効果が特定のWebページでどのように作成されるのか疑問に思いました：

Webページをロードすると、閉じるボタンのあるバナー広告が最上層として表示され、実際のWebページが最下層として表示されます。Webページが完全に暗くなり、閉じるボタンが付いたバナー広告に自然に注目が集まるようになります。広告のこの閉じるボタンをクリックすると、実際のWebページがすぐに表示されますが、現在は元の明るさに戻ります。

まあ、それはほんの一例でした、私は広告を表示するそのような慣行が厄介であることを知っています。

そして、ここでの私の質問は-どのようにしてあなたのウェブページにその薄暗くて明るい効果を得るのですか？

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 の :target セレクターと opacity を使用してこれを行うことができますが、どちらもほとんどのブラウザーでは使用できません。

代わりに、薄暗いボックスを表示するには 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 に答える