第10回 ブラウザ全体をブロックしてみる – jQuery入門
2009 年 6 月 17 日 投稿者: naga3
モーダルウインドウを表示したときは、ウインドウの後ろの操作はできないようにしたいですね。そういう用途に適した、ブラウザ全体をブロックするレイヤをjQueryで実現してみましょう。今回も車輪の大再発明です。ちゃんとしたものが欲しければ「jQuery BlockUI Plugin」をどうぞ。
実行してみる
以下のリンクをクリックしてみてください。ブロック！
ソース
ファイルが必要ならば右クリックで保存してください。HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(function() {
$('#open').click(function() {
$('#shim').css({
display: 'block',
opacity: 0.5,
width: $().width(),
height: $().height()
});
$(window).bind('resize.shim', function() {
$('#shim').css({width: $().width(), height: $().height()});
});
});
$('#shim').click(function() {
$(this).css('display', 'none');
$(window).unbind('resize.shim');
});
});
</script>
<style type="text/css">
#shim {
margin: 0;
padding: 0;
background-color: black;
left: 0;
top: 0;
border: 0px none;
position: absolute;
display: none;
}
</style>
</head>
<body>
<a href="#" id="open">開く</a>
<div id="shim"></div>
</body>
</html>
プログラムの解説
画面をブロックするレイヤを「shim」と名づけています。shimはクサビという意味らしいです。shimのdiv
<div id="shim"></div>
ソースの最下部あたりにあるこの行が画面をブロックするレイヤを表しています。shimのCSS
#shim {
margin: 0;
padding: 0;
background-color: black;
left: 0;
top: 0;
border: 0px none;
position: absolute;
display: none;
}
画面全体を覆うためにpositionをabsoludeに、最初は表示させないためにdisplayをnoneにしています。
$('#shim').css({
display: 'block',
opacity: 0.5,
width: $().width(),
height: $().height()
});
「開く」をクリックしたときに変更されるCSSです。displayをblockにしてshimを可視にし、幅と高さをdocumentの幅と高さに合わせることによって画面全体を覆うようにしています。「opacity: 0.5」はshimを半透明にしている部分です。IE6ではopacityプロパティはサポートされていないのですが、jQueryが良きようにはからってくれます。素晴らしい。ブラウザのリサイズイベント
$(window).bind('resize.shim', function() {
$('#shim').css({width: $().width(), height: $().height()});
});
ブラウザがリサイズされたときに、shimのサイズをそれに追従して合わせている部分です。window要素に対してresizeイベントをbind（追加）しています。resizeの後ろに「.shim」と書かれていますが、これは名前空間と言い、同イベントを削除するときに識別するためのものです。
$(window).unbind('resize.shim');
終了時にブラウザのリサイズイベントを削除しています。