2013年7月27日土曜日

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

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

ゲームのイベント中やメッセージ送りを待っている時など、
画面を暗くして操作できないようにしたい場合があります。

1つの手段として半透明な黒い <div> でコンテンツを覆い隠す方法があります。
一時的にコンテンツのクリックを不可能にするサンプルを作成しました。



サンプルアプリ
ソースコード

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

0 件のコメント:

コメントを投稿