jQueryゼロから / BlackOut (Lightboxの背景のような効果)


2011.07.07追記: ウィンドウサイズ変えてもズレないようにこちらに修正
jQueryゼロから / BlackOutふたたび

Lightbox的な背景が暗くなるアレです。
背景用に適当に<div id=”layer”>とか用意しておいて、下記のようなCSS設定します。
注意するのはz-indexくらい?

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
#layer {
    position: absolute;
    z-index: 100000;
    background: #000000;
    top: 0px;
    left: 0px;
    filter: alpha(opacity=0);
    opacity: 0.0;
    display: none;
}
</style>

クリックでこの<div>をウィンドウサイズにしてから、フェードインさせます。
とりあえず、トリガは<a class=”blackout”>にしておきます。

1
2
3
4
5
6
7
8
$('a.blackout').click(function(){
    var width  = $(document).width();
    var height = $(document).height();
    $('#layer').width(width)
               .height(height)
               .show()
               .fadeTo('slow', 0.8);
});

クリック後にWindowサイズを取得すれば、ページ読み込み後にWindowサイズを変えても問題ないです。ただ、Blackoutした状態でWindowサイズ変えると恥ずかしい感じになります…(2011.07.07 修正してます)
レイヤーをクリックすると閉じるようにしときます。

1
2
3
4
5
$('#layer').click(function(){
    $(this).fadeTo('fast', 0, function(){
        $(this).hide();
    });
});

サンプル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です