2011.07.07追記: ウィンドウサイズ変えてもズレないようにこちらに修正
jQueryゼロから / BlackOutふたたび
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(); }); }); |