jQueryゼロから / BlackOutふたたび


前回のがウィンドウサイズに追従しなくて恥ずかしい感じだったので、やり直し。WordPressのプラグインアップデートの画面がそんなんだったので、見て真似しました。(Thickbox使った方が早いって話だな)

まずはブラックアウト用に <div id=”layer”> ってのを用意、画面を覆うようにCSS設定します。
前回との主な違いは position: fixed; にして、width & height を100%にしてます。

1
2
3
4
5
6
7
8
9
10
11
12
#layer {
    position: fixed;
    z-index: 100000;
    background: #000000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    opacity: 0.0;
    display: none;
}

あとは前回同様に <a class=”blackout”> をクリックで先の <div id=”layer”> を表示させます。(classだと画面内に複数置けるので)
CSSで width, height を 100% にしてるので、前みたいにいちいち Window サイズ拾わないので楽です。実質 show, hide と fadeIn, fadeOut だけ。

1
2
3
4
5
6
7
8
9
10
11
jQuery(function($){
    $('a.blackout').click(function(){
        $('#layer').show()
                   .fadeTo('slow', 0.8);
    });
    $('#layer').click(function(){
        $(this).fadeTo('fast', 0, function(){
            $(this).hide();
        });
    });
});

サンプル

blackout – jsdo.it – share JavaScript, HTML5 and CSS

「jQueryゼロから / BlackOutふたたび」への1件のフィードバック

コメントを残す

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