jQueryで画面を暗くして操作できなくする

黒い半透明な <div> でコンテンツを覆ってクリックイベントを通さないようにできます。

ゲームのイベント中やメッセージ送りを待っている時など、

画面を暗くして操作できないようにしたい場合があります。

１つの手段として半透明な黒い <div> でコンテンツを覆い隠す方法があります。

一時的にコンテンツのクリックを不可能にするサンプルを作成しました。

サンプルアプリ

http://okanoworld.appspot.com/sample/html5/busy/index.html

ソースコード

https://github.com/yokano/sample/tree/master/html5/busy

黒くて半透明な <div> をコンテンツの上に表示しています。
z-index でコンテンツよりも上に <div> を表示し、
jQuery から CSS の visibility の visible/hidden を切り替えています。