【jQuery】グレーアウトさせてポップアップを出す方法！

インジケータを回して何かを作業中に画面操作を防止する時や、
ポップアップを表示させる時などに使用するグレーアウト方法と、
グレーアウト上に表示するポップアップやインジケーター。
その他、作業領域等を表示させる方法をサンプルコードと共に解説します。

主に、JavaScript部分ではjQueryを使用し、HTMLとCSSを操作して実現させます。
それでは早速、次章より具体的な実装方法について解説します。

グレーアウト用の半透明パネルを予め用意しておこう

まずはグレーアウト用の半透明パネルの作成です。
グレーアウト時に毎回作成しても良いのですが、
結局同じものを使用するので、今回は予め非表示でHTML上に存在させてしまいます。

HTMLに書くとしたら下記の様な単純なDIVにIDとスタイル適用用にクラスを指定します。
記述位置は、内部要素の入れ子にならないように、『body』タグの子になる様にします。

そして、クラス『gray_panel』用のCSSは下記の通りです。

background : #000;
opacity  : 0.5;
width  : 100%;
height  : 99999;
position : fixed;
top   : 0;
left  : 0;
display  : none;
z-index  : 50;

今回はグレーアウトを作成するので、背景色を#000(黒)としていますが、
お好きな色にカスタマイズして頂いても問題ありません。

『opacity』による透明度も、今回は背景を透かしたいので0.5としていますが、
こちらもお好みです。

横幅は画面いっぱいにする為に100%としましょう。
高さを今回は『99999』としましたが、コチラは適当な大きい数値を指定してください。
上記の例は極端に大きいですが、想定できるブラウザサイズ（巨大スクリーン全画面サイズ）の
高さがあれば問題ないでしょう。
もし、小さい値ですと隙間が出来てしまい、
隙間から操作が出来てしまい、見た目も良くありません。
画面全体を必ず覆いつくすサイズを設定しましょう。

位置関係は左上固定とし、表示状態は『display:none;』にて非表示にしておきます。
重ね合わせの位置関係も一番上にしたいので、『z-index』を適当な大きい数値にして下さい。

また、上記の様な処理はHTMLとCSSに記述する必要がありますが、
結局の所、グレーアウトはJavaScriptでの制御となる為、
そういったバックグラウンドの下準備はJavaScriptに行わせる事も可能です。
例えば、jQueryを使った要素の追加とスタイルの指定は下記の様になるでしょう。

$(function(){
 /* グレイパネル作成
 -------------------------------------------------------------------------------*/
 $('

')
  .css({
   "background" : "#000",
   "opacity"  : "0.5",
   "width"   : "100%",
   "height"  : 99999,
   "position"  : "fixed",
   "top"   : "0",
   "left"   : "0",
   "display"  : "none",
   "z-index"  : "50"
  })
  .appendTo($("body"));
});

私としてはコチラの方が好きですね。
勿論お好みの方法で結構ですが、
これからJavaScriptでの制御を記述していくので、
グレーアウト関係は一纏めにしておいた方が分かりやすいかと思います。

グレーアウトを表示させよう

続いて、先程作成したグレーアウトを表示させる方法です。
表示は簡単で、下記の様な記述でフェードイン表示させる事が可能です。

// グレーアウトをフェードイン
$( "#gray_panel" ).fadeIn("slow");

先程作成したグレイパネルのIDをセレクタに指定し、『fadeIn()』メソッドにて
フェードイン処理を行います。引数に速度を渡す事で、
表示までの時間を調整する事が出来ます。

ですが、グレーアウトだけ行う機会は殆ど無いでしょう。
大抵の使い方は、グレーアウトされた上に、何かしらのコンテンツを表示させます。

グレーアウト上に表示させるコンテンツはHTMLに記述しておきましょう。


ポップアップコンテンツ

ポイントは、IDを指定してスタイルを『display:none;』にて非表示にしておきます。
後は、DIVの中はグレーアウト前面に表示されるポップアップとして作り込んで下さい。
勿論、インジケータを表示するのも良いでしょう。
普通のHTMLを構築する感覚で、ポップアップを作成して下さい。

そして、作りこんだポップアップと共に、
グレーアウト表示させるには下記の様に行います。

// ポップアップの画面中央になる様な位置関係を算出
var left_positon = ($("body").width()/2)-($("#popup").width()/2)

// グレーアウトをフェードイン
$( "#gray_panel" ).fadeIn("slow");

// ポップアップのスタイルを定義
$( "#popup" )
 .css("z-index","51")
 .css("position", "fixed")
 .css("top", 70)
 .css("left", left_positon)
 .fadeIn("slow");

まず、ポップアップを画面中央に表示させる為に位置を算出しています。
『body』の横幅を二つに分けてセンター位置を取得し、
ポップアップも二つに分けてポップアップのセンター位置を取得します。
『body』のセンター位置から、ポップアップのセンター位置までの距離（ポップアップ横幅/２）を
差し引いて、丁度中央に表示される位置を算出します。

次に、先程解説した方法でグレーアウトを表示させます。

そして、ポップアップのスタイルを定義しますが、
『z-index』はグレーアウトよりも大きい数値にして下さい。
ポジションも固定位置で、位置関係は先程算出した横位置と、
任意の縦位置を指定します。

ポップアップもグレーアウトと同じ様に『fadeIn("slow");』を使って
フェードインさせます。

これでグレーアウトが登場した後にポップアップが表示されるロジックの完成です。

グレーアウトを終了させよう

グレーアウトの表示が出来れば、次は非表示にする方法が必要です。
表示が『fadeIn()』にて単純に実装した通り、非表示もフェードアウトさせたいので
『fadeOut()』を使用します。

ですが、グレーアウト部分だけ出なく、ポップアウト部分もフェードアウトさせる必要がある事に
注意して下さい。

具体的には下記の様な処理です。

// グレーアウトをフェードアウト
$( "#gray_panel" ).fadeOut("slow");

// ポップアップをフェードアウト
$( "#popup" ).fadeOut("slow");

簡単ですね。
後はコールバックで上記の処理を行うも良いですし、
閉じるボタンの制御として上記を走らせるのも良いでしょう。

こういったグレーアウトはAjax的な非同期通信時にも使いますし、
インジケータやメッセージ表示のアラート、画面遷移まで必要の無いサブ画面の表示、
入力フォームの出現やプレビュー、補足情報等、
とても使用頻度が高く、用途の幅も広いので
これらの処理をメソッド化したり、ID固定となっている部分を引数で得られる様にして
汎用的なライブラリにしても良いかも知れません。

今回はとてもシンプルなグレーアウト方法について解説しました。
何か質問があります時は、コメント欄に書き込んで頂ければ幸いです。

Categories: CSS, HTML, JavaScript, jQuery

【jQuery】グレーアウトさせてポップアップを出す方法！