初心者でも分かる！な「モーダルウィンドウ」の作り方

• 2014.06.26(Thu) 23:00
• WEB制作

リンクをクリックすると、画面の真ん中にもわっと出てくるモーダルウィンドウ。ヘルプやアラートなど、ちょっとしたメッセージを表示するのにスペースを取らないから重宝しますよね！

今回はこのモーダルウィンドウの作り方を、Javascript初心者の方でも1から作れるようになることを目指して、書いてみました。

とりあえず「ソースコードだけほしい」という方は「完成版サンプルプログラム」からどうぞ。

1モーダルウィンドウのコンテンツ部分を作ろう！

まずはモーダルウィンドウで表示されるコンテンツを作成していきます。「モーダルウィンドウを表示してくれてありがとう！」というメッセージ(ウィンドウ)を表示させてみましょう。

1-1デザインを用意する

用意したサンプルが、下記のウィンドウです。この記事を通して、jQueryが正常に動くのを確認してから、中身をカスタマイズして下さいね！

HTML

HTMLとスタイルシートを紹介します。まずはHTML、意識する点といえば、idにmodal-contentと指定しているところです。このidは、後々jQueryでウィンドウの表示・非表示などの操作をするのに必要になります。

<div id="modal-content">
	<p>モーダルウィンドウを表示してくれてありがとう！</p>
</div>

スタイルシート

続いてスタイルシートの部分を解説していきます。基本的なデザイン面の指定は下記の通りです。幅やボーダーなど、自由に指定できます。

#modal-content{
	width:50%;
	margin:0;
	padding:10px 20px;
	border:2px solid #aaa;
	background:#fff;
}

#modal-content p{
	margin:0;
	padding:0;
}

デモを見る

1-2コンテンツを非表示にしておこう

このウィンドウは、何らかのテキストやボタンを押すことで浮かび上がる仕組みです。初期では非表示にしておく必要がありますね。スタイルシートで、#modal-contentに次の命令を加えましょう。

#modal-content{
	...
	display:none;
}

デモを見る

1-3コンテンツを手前に表示させておこう

続いて、普段ではあまり目にする機会のないz-indexの値を指定します。z-indexとは、「手前、奥」の概念です。z-indexの値が高いほど、そのコンテンツは、値が低い他のコンテンツよりも手前に表示されることになります。初期値は0(または親要素と同じ)です。

モーダルウィンドウのコンテンツは、通常表示されているコンテンツ(z-index:0)と、この次に作る予定のオーバーレイ(z-index:1)よりも、手前に表示させるので、次のように指定しておきましょう。

#modal-content{
	...
	z-index:2;
}

デモを見る

なお、z-indexについては、下記のページが参考になります！

1-4コンテンツの位置を固定させておく

最後にposition:fixedという命令を加えておきます。これは、「その要素を指定した位置に固定する」という命令です。「固定」というのは、ページをスクロールしても、ずっと画面上のその位置に止まり続けるという意味です。

「画面上のどの位置に固定するか」は、top(画面上部から何ピクセルか)と、left(画面左部から何ピクセルか)などで指定する仕組みなのですが、現時点ではまだ指定しません。後ほど、jQueryによって動的に指定することになります。

#modal-content{
	...
	position:fixed;
}

デモを見る

positionについては、下記のページが参考になります。fixedとabsoluteとの違いを意識してみて下さい。

2モーダルウィンドウのオーバーレイ部分を作ろう！

続いて、モーダルウィンドウのオーバーレイの部分を作成していきましょう。モーダルウィンドウを表示させると、よく背景が黒や白の半透明になって、その部分をクリックするとウィンドウを閉じたりできますよね。あの膜みたいな部分のことです。

2-1HTMLとCSSを用意しておく

それでは、オーバーレイのHTMLとCSSを紹介していきます。オーバーレイは、ページをいくらスクロールしても追ってくる、width:100%、height:100%の、「画面全体を覆うコンテンツ」をイメージして下さい。

頑張ってイメージを作ってみました！ページをスクロールしても、オーバーレイ(赤い背景)が、位置固定のため追ってくる形です。仕組みは、ブログでよくあるサイドバーの位置固定(追尾)コンテンツと変わりません。

HTML

まずはHTMLです。後ほどjQueryで操作するために、idにmodal-overlayを指定しています。なお、HTMLコードはjQueryで動的に生成、削除するため、はじめからHTMLのソース上に用意しておく必要はありません。「こういうコードを呼び出すんだ」程度に思っておいて下さい。

<div id="modal-overlay"></div>

スタイルシート

続いてスタイルシートです。z-index:1、display:none、position:fixedについては、前章で説明した通りです。topとleftの値に関しては、変わることがないため、ここで指定しています。

なお、width、heightに関しては、画面全体を覆うために、それぞれ100%、120%を指定しました。heightを100%ではなく120%にしている理由は、次項で説明します。

#modal-overlay{
	z-index:1;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
}

高さ(height)を120%に指定している理由

heightを120%にしているのは何故というと、スマホ(iPhone)のナビバー対策です。参考画像のURLバーと下部バーの部分、スクロールをすると縮むのが分かりますよね？

最初にアクセスした時、height:100%で取得できるのは「ナビバーのスペースで縮んでいる分の高さ」です。そのため スクロールをした時、参考画像のように、一瞬だけではありますが、オーバーレイの下部分が途切れてしまいます。その後、指を離すと、アジャストされて途切れは解消されます。一瞬ではありますが、途切れるのはちょっと…、ということで120%を指定しておきました。

2-2背景を半透明にしよう

オーバーレイの背景色を設定します。真っ黒や真っ白にしてしまうのもいいですが、ここでは半透明にする方法を紹介します。背景を半透明にするには、下記のように、background-colorにrgba()を指定して下さい。

#modal-overlay{
	...
	background-color:rgba(255,255,255,0.75);
}

rgba()は第1〜3引数にRGB値で色を、第4引数に「透明度」を指定することができます。1が最大値で、0に近づくほど、透明度が少なくなります。サンプルでは0.75に設定しています。

rgbaのサンプル

サンプルでは白の半透明背景にしていますが、これを、例えば黒の半透明背景にしたい場合には、次のように指定して下さいね。

	background-color:rgba(0,0,0,0.75);

例えば赤の半透明背景なら次のようになります。

	background-color:rgba(255,0,0,0.75);

rgba()については、下記の記事で非常に分かりやすく丁寧に解説されています！

また、「RGB値による色の指定方法」については、下記ページの表が見やすいのでお勧めです！

3jQueryでモーダルウィンドウを表示させてみよう！

それでは、前章で作成したパーツを、jQueryで表示させてみましょう。

3-1呼び出すための「スイッチ」を用意する

まずは、モーダルウィンドウを呼び出すための「スイッチ」として、下記の単純なリンクテキストを用意しておきます。jQueryで操作するために、idにmodal-openを設定してあります。

押すとモーダルウィンドウを開きます(サンプルなので何も起きません)

<a id="modal-open">押すとモーダルウィンドウを開きます</a>

スタイルシートは次の通りです。ホバー(マウスを重ねた)時に、色を赤くし、マウスの形をpointerに変更します。

#modal-open{
  color:#00f;
  text-decoration:underline;
}

#modal-open:hover{
	cursor:pointer;
	color:#f00;
}

3-2クリックイベントを設定する

ここからがやっと、Javascript(jQuery)ですねー。長かった…。まずは、先ほど用意したスイッチに、jQueryで「クリックイベント」を設定します。idがmodal-openである要素のクリックイベントは、次のように設定することができます。

$('#modal-open').click(function(){
	//[#modal-open]をクリックしたら起こる処理
});

デモを見る

モーダルウィンドウを表示させる手順

クリックしたら、次の順番で、処理が起こるように設定します。こうしてみると、モーダルウィンドウって単純ですよね…。1つ1つ見ていきましょう。

3-3オーバーレイを出現させる

スイッチをクリックした時に、まずはオーバーレイ(id:modal-overlay)を出現させます。

HTMLコードを生成する

オーバーレイのHTMLコードは あらかじめソース上に用意されていないため、jQueryで動的に生成する必要があります。具体的には次のように行ないます。

//オーバーレイ用のHTMLコードを、[body]内の最後に生成する
$('body').append('<div id="modal-overlay"></div>');

このappendは、「指定した要素内の最後にHTMLを追加する」という命令です。サンプルではbodyタグを指定しています。例えば、次のようなHTMLがあったとします。

<body>
<p>これはHTMLです…。</p>
</body>

これに、先ほどのサンプルのappendを実行すると、次のようになります。

<body>
<p>これはHTMLです…。</p>
<div id="modal-overlay"></div></body>

デモを見る

appendについては下記のページで詳しく解説されているので、ご参考下さい！

オーバーレイをじわっとフェードインさせる

オーバーレイのHTMLコードを生成しても、画面上には何も表示されません。何故なら、あらかじめスタイルシートでdisplay:noneを指定して、非表示にしているからです。これを、フェードイン(じわっと出現)させるには、次のように命令します。

//[$modal-overlay]をフェードインさせる
$('#modal-overlay').fadeIn('slow');

デモを見る

appendで生成したコンテナ(id:modal-overlay)を、fadeIn()でフェードインさせているわけですねー。ちなみに、slowをfastにすれば、「じわっと」のスピードが上がります。

これで、オーバーレイを出現させることができました。

3-4コンテンツ部分を出現させる

続いて、モーダルウィンドウのコンテンツ部分を出現させましょう。「出現のさせ方」は、オーバーレイと全く同じです。下記のようにフェードインさせるだけです。

//[$modal-content]をフェードインさせる
$('#modal-content').fadeIn('slow');

デモを見る

コンテンツを真ん中に表示させる

ただ、フェードインさせる前に、コンテンツの位置を「画面の真ん中」に持ってきてやる必要がありますよね…。ここで、positionのtop(画面上部から何ピクセル離れているか)とleft(画面左部から何ピクセル離れているか)の値を、動的に設定します。

例えば、画面(ウィンドウ)幅が1000pxあって、コンテンツ幅が200pxある場合、真ん中に持ってくるには、left(片側の余白の値)に400pxを設定します。左端から400px離せばいいというわけです。これは算数の問題だから簡単ですよね？「片側の余白」は次の計算で求めることができます。

[1000(画面全体の幅) - 200(コンテンツの幅)] ÷ 2 = 400

高さに関しても、法則は全く一緒です。この「センタリング」をjQueryで実現したのが、次の命令です。

//画面(ウィンドウ)の幅を取得し、変数[w]に格納
var w = $(window).width();

//画面(ウィンドウ)の高さを取得し、変数[h]に格納
var h = $(window).height();

//コンテンツ(#modal-content)の幅を取得し、変数[cw]に格納
var cw = $('#modal-content').outerWidth({margin:true});

//コンテンツ(#modal-content)の高さを取得し、変数[ch]に格納
var ch = $('#modal-content').outerHeight({margin:true});

//コンテンツ(#modal-content)を真ん中に配置するのに、左端から何ピクセル離せばいいか？を計算して、変数[pxleft]に格納
var pxleft = ((w - cw)/2);

//コンテンツ(#modal-content)を真ん中に配置するのに、上部から何ピクセル離せばいいか？を計算して、変数[pxtop]に格納
var pxtop = ((h - ch)/2);

//[#modal-content]のCSSに[left]の値(pxleft)を設定
$('#modal-content').css({'left': pxleft + 'px'});

//[#modal-content]のCSSに[top]の値(pxtop)を設定
$('#modal-content').css({'top': pxtop + 'px'});

デモを見る

このように、モーダルウィンドウを開いた時の画面の大きさに合わせてtopとleftの値を設定してやることで、コンテンツをセンタリング(真ん中に配置)します。指定した要素の幅、高さを取得する命令(7〜11行目)については、下記ページが参考になります。

ちょっと寄り道な、「$(window).height()」の知識

オーバーレイを作成する時にも触れましたが、スマホ(iPhone)だと、$(window).height()で取得できる高さは「上下のナビバーのスペースだけ縮んだ分の高さ」です。

また、それとは別に、$(window).height()で取得できる高さは、微妙に少ない方向にズレることがあるそうです。そのため、正確な高さを取得したい場合は、jQueryではなく、下記のようにJavascript本来の記述で取得するのをお勧めします。

//画面(ウィンドウ)の高さを取得し、変数[h]に格納
var h = window.innerHeight;

今回のモーダルウィンドウにおいては、特に大きな影響がないため、あえて$(window).height()をそのまま利用しています。むしろ、取得できるウィンドウの高さが少なくなる分、少しだけウィンドウがセンターより上に来るので見やすいなーとか思ってます。

3-5完成したJavascriptのサンプル

以上のことを踏まえて、作成したモーダルウィンドウのJavascriptのサンプルが下記です。モーダルウィンドウを出現させるところまで、いきましたね。

//[#modal-open]のクリックイベント
$('#modal-open').click(function(){

	//画面(ウィンドウ)の幅、高さを取得
	var w = $(window).width();
	var h = $(window).height();

	//コンテンツ(#modal-content)の幅、高さを取得
	var cw = $('#modal-content').outerWidth({margin:true});
	var ch = $('#modal-content').outerHeight({margin:true});

	//オーバーレイを出現させる
	$('body').append('
');
	$('#modal-overlay').fadeIn('slow');

	//コンテンツを出現させる
	$('#modal-content')
	.css({'left': ((w - cw)/2) + 'px','top': ((h - ch)/2) + 'px'})
	.fadeIn('slow');

});

デモを見る

4モーダルウィンドウを終了させてみよう！

前章までで、モーダルウィンドウを表示させることができました。でもそのまま戻れないんじゃ、悪い意味での愛生会病院HPになってしまいます…。ということで、最後の仕上げとして、モーダルウィンドウを終了する処理を、jQueryで実装しましょう！

4-1クリックイベントを設定する

モーダルを閉じる「スイッチ」ですが、次の2つを用意しましょう。

次のように、モーダルウィンドウに閉じるボタン(手抜きのテキストです…)を追加しておきましょう。

<div id="modal-content">
	<p>モーダルウィンドウを表示してくれてありがとう！</p>
	<p><a id="modal-close">とじる…</a></p>
</div>

ということで、またもや、クリックイベントの登場です。おさらいの形になりますが、下記のように設定します。

$({要素名}).click(function(){
	//{要素名}をクリックしたら起こる処理
});

要素名の部分には、カンマで区切って、複数の値を設定することができます。オーバーレイの#modal-overlayと、新たに設置した「閉じるボタン」の#modal-closeを設定すると、次の通りになります。

$('#modal-overlay,#modal-close').click(function(){
	//[#modal-overlay]、または[#modal-close]をクリックしたら起こる処理
});

4-2フェードアウトした後に処理をする

クリックで起こる処理としては、モーダルウィンドウの「コンテンツ部分」と「オーバーレイ部分」をそれぞれフェードアウトした後に、オーバーレイのHTMLコードをソース上から削除します。その処理は、次のように実装します。fadeOut()の第2引数に記述することで、「フェードアウト後に〜を行なう」という処理を実現できます！

$('#modal-content,#modal-overlay').fadeOut('slow',function(){
	//[#modal-content]と[#modal-overlay]をフェードアウト後にする処理
});

HTML上から要素を削除する

HTML(DOM)上から、ある要素を削除するには、remove()を利用します。#modal-overlayを削除するには、次のように記述します。

//[#modal-overlay]をHTML(DOM)上から削除
$('#modal-overlay').remove();

4-3モーダルウィンドウを閉じるサンプルプログラム

以上を踏まえると、下記のようなプログラムになりますね。

//[#modal-overlay]、または[#modal-close]をクリックしたら…
$('#modal-overlay,#modal-close').click(function(){

	//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
	$('#modal-content,#modal-overlay').fadeOut('slow',function(){

		//[#modal-overlay]を削除する
		$('#modal-overlay').remove();

	});

});

デモを見る

5モーダルウィンドウの完成版サンプルプログラム

長々とくどい説明に付き合っていただき、ありがとうございました。そして、お疲れ様でした！これまでのことを踏まえた、モーダルウィンドウのプログラムは下記の通りとなります。

$('#modal-open').click(function(){

	//画面(ウィンドウ)の幅、高さを取得
	var w = $(window).width();
	var h = $(window).height();

	//コンテンツ(#modal-content)の幅、高さを取得
	var cw = $('#modal-content').outerWidth({margin:true});
	var ch = $('#modal-content').outerHeight({margin:true});

	//オーバーレイを出現させる
	$('body').append('
');
	$('#modal-overlay').fadeIn('slow');

	//コンテンツを出現させる
	$('#modal-content')
	.css({'left': ((w - cw)/2) + 'px','top': ((h - ch)/2) + 'px'})
	.fadeIn('slow');

	//[#modal-overlay]、または[#modal-close]をクリックしたら…
	$('#modal-overlay,#modal-close').click(function(){
 
		//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
		$('#modal-content,#modal-overlay').fadeOut('slow',function(){
 
			//[#modal-overlay]を削除する
			$('#modal-overlay').remove();
 
		});

	});

});

#modal-content{
  width:50%;
  margin:0;
  padding:10px 20px;
  border:2px solid #aaa;
  background:#fff;
  position:fixed;
  display:none;
  z-index:2;
}
 
#modal-content p{
  margin:0;
  padding:0;
}

#modal-overlay{
  z-index:1;
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:120%;
  background-color:rgba(255,255,255,0.75);
}

#modal-open{
  color:#00f;
  text-decoration:underline;
}

#modal-open:hover{
  cursor:pointer;
  color:#f00;
}

<div id="modal-content">
  <p>モーダルウィンドウを表示してくれてありがとう！</p>
  <p><a id="modal-close">とじる…</a></p>
</div>

<p><a id="modal-open">押すとモーダルウィンドウを開きます</a></p>

デモを見る

5-1リサイズに対応する

ここまでのプログラムでは、モーダルウィンドウを表示させた後にウィンドウを広げると、センタリングが崩れてしまいます。ブラウジングをしていてウィンドウの幅を変更する人はそうはいないので、無視しても問題ないとは思いますが、「どうしても気になる…」という場合は「リサイズが起きたらセンタリングする」という処理を加えましょう。

リサイズが発生したら処理をする方法

リサイズを条件に、処理を行なうには、次のように記述します。

$(window).resize(function(){
	//ウィンドウがリサイズされた時の処理
});

センタリングの処理は、モーダルウィンドウを開いた時にも行なっています。同じ処理が2カ所にあるのは不便なので、「センタリングする処理」を1つの関数にまとめるのがいいと思います。具体的には次の通りです。

//センタリングをする関数
function ModalCentering(){
	//画面(ウィンドウ)の幅、高さを取得
	var w = $(window).width();
	var h = $(window).height();

	//コンテンツ(#modal-content)の幅、高さを取得
	var cw = $('#modal-content').outerWidth({margin:true});
	var ch = $('#modal-content').outerHeight({margin:true});

	//[0]leftの値、[1]topの値という構成の配列で返却
	return Array( ((w - cw)/2) , ((h - ch)/2) );
}

リサイズが起きても、コンテンツが中央から離れないプログラム完成版

下記はリサイズ対応版です。「リサイズでセンタリングが崩れるのは嫌！」という人は、ぜひ、お使い下さい！

//モーダルウィンドウのリサイズ対応版
$('#modal-open').click(function(){

	//センタリング
	var pixel = ModalCentering();

	//オーバーレイを出現させる
	$('body').append('
');
	$('#modal-overlay').fadeIn('slow');

	//コンテンツを出現させる
	$('#modal-content')
	.css({'left': pixel[0] + 'px','top': pixel[1] + 'px'})
	.fadeIn('slow');

	//[#modal-overlay]、または[#modal-close]をクリックしたら…
	$('#modal-overlay,#modal-close').click(function(){
 
		//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
		$('#modal-content,#modal-overlay').fadeOut('slow',function(){
 
			//[#modal-overlay]を削除する
			$('#modal-overlay').remove();
 
		});

	});

	//リサイズしたらセンタリング
	$(window).resize(function(){
		var pixel = ModalCentering();
		$('#modal-content').css({'left': pixel[0] + 'px','top': pixel[1] + 'px'});
	});

	//センタリングをする関数
	function ModalCentering(){
		//画面(ウィンドウ)の幅、高さを取得
		var w = $(window).width();
		var h = $(window).height();

		//コンテンツ(#modal-content)の幅、高さを取得
		var cw = $('#modal-content').outerWidth({margin:true});
		var ch = $('#modal-content').outerHeight({margin:true});

		//[0]leftの値、[1]topの値という構成の配列で返却
		return Array( ((w - cw)/2) , ((h - ch)/2) );
	}

});

デモを見る

6閉じるボタンに使えそうなアイコン素材いろいろ

上記サンプルでは、「閉じるボタン」がテキストだけという最高に手抜きなものだったので、お詫びに「閉じるアイコン素材」を配布しているwebサイトをまとめてみました。素敵なサイトばかりなので、よろしければご利用下さい。

6-1無料素材倶楽部

カラフルでポップな×ボタンが揃っています。画像形式はgifです。2014年6月現在、無料で加工、商用利用OKとのことです。

6-2Styraise

カラフルなドット系の「閉じるアイコン」です。PSD、PNG形式で配られていて、2014年6月現在、加工も商用利用もOKとのことです。

6-3DOTS DESIGN

こちらもドットデザイン専門のアイコン素材サイト、「DOTS DESIGN」から、ドットの「閉じるボタン」です。ダウンロードリンクから、色違いを含めたアイコンセットを手に入れることができます。

6-4IconFinder

海外のアイコン素材検索サイトの「Iconfinder」。こちらも「close icon」というキーワードで700種類以上の関連アイコンを探すことができます。検索上位は有料アイコンが目立ちますが、それら以外は無料利用、商用利用OKです。

6-5free-icon

こちらは嬉しいフラットタイプの「閉じるアイコン」です。2014年6月現在、利用規約の範囲内で無料利用、商用利用OKとのことです。

7モーダルウィンドウをアレンジしたUI例

スマホにおいては、無駄なスペースを省いて「ソーシャルボタンの表示」に使うのも、モーダルウィンドウの1つの利用方法だと思います。かねてから私が好きなUIを実装しているポンダッド(@pon_dad)さんのブログ「futapapa」を紹介したいと思います。

左下の方にあるソーシャルボタンを押すと、上からウィンドウがぬるっと降りて来て、「ありがとう」というメッセージと一緒にソーシャルボタンが表示される仕組みです。広いスペースの真ん中にある、トレードマークのアイコンが印象的ですよね。モーダルウィンドウって、「情報を見せる」だけだと思ってたんですが、このように「余白」も表現できたんですねー。感動しました。

「感動」という言葉を免罪符に真似してしまったのが、この「Syncer」です。ポンダッドさん、すいません…。「スマホビュー」では、記事の途中に「あとでよむ」ボタンを設置していて、それをクリックするとメッセージと一緒にソーシャルボタンを表示しています。

面白い「モーダルウィンドウの使い方」を知っている方、ぜひ、コメント欄で教えて下さいね！

この記事へのコメント

感想、ご指摘などお気軽にお寄せ下さい。「関連記事を書いた」という方はご報告いただければリンクします。

コメントを書き込む

• コメント
• ログイン

お名前 :

• Twitterでログイン(認証)する
• Facebookでログイン(認証)する
• はてなでログイン(認証)する

※Twitter、Facebook、はてな、いずれかのアカウントをお持ちの方は、本人認証(ログイン)を行なうことができます。
※本人認証をすることで、書き込みの待ち時間なし、画像アップロード、アイコンなどが利用できます。
※認証時にサービスと連携しますが、名前とアイコン以外の情報を読み込んだり、また書き込みを行なうことはありません。連携で要求する権限は「公開情報の読み取り」のみです。

現在、1件のコメントがあります。

ポンダッド
2014.06.27 05:40

うわ、ご紹介ありがとうございました。実はSNSボタンのカウント取得方法が分からなかったので苦肉の策でこの形にしたんです。本当はあのボタン押すと激難のゲームが起動してクリアしないとシェアできない…とかくっだらないシステムを考えていたんですが…やめて良かったです（笑）