超簡単!jQueryプラグイン無しでフェードインするモーダルウィンドウを実装する

2014.6.10 jQuery

超簡単!jQueryプラグイン無しでモーダルウィンドウを実装

 

いろいろプラグインがありますが、実はモーダルウィンドウは超~簡単に書けてjQuery初心者でも実装出来てしまうのです!

今回はメモ程度に綴っていきます。

モーダルウィンドウとは?

モーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプウィンドウのことである。

モーダルウィンドウが表示されると、その中で指定された操作を完了するかキャンセルするかして、そのウィンドウを閉じない限り、親ウィンドウ側に対する操作ができないようになる。このため、モーダルウィンドウユーザーに特定の操作をさせたり、確認を促したりといった目的で用いられることが多い。

よくわかりませんが、最近「モーダルウィンドウ」と言われる場面ではまた上記とは違った意味合いで使われていると思いますね。

早速書いていきます

HTML

<div id="container">
<button>ウィンドウ</button>
<section class="window">
  <h1>現れましたか?</h1>
  <section>
  	<p>classに"hideWindow"と設定した部分がフェードインしてきます。</p>
  </section>
  
</section>
</div>

CSS

html,body {
	font-family:Lucida sans , "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	margin: 0;
	padding: 0;
}

#container{
	width:100px;
	margin:100px auto;
}

button{
	width: 80px;
	padding: 10px;
	background-color: #c9c9c9;
	border-radius: 4px;
}

	
.graylayer{
	display:none;
	position: fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-color: #000;
	opacity:.7;
	filter(alpha=70);
}
.window{
	padding: 20px;
	display:none;
	position: fixed;
	top: 50%;
	left:50%;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);
	background-color: rgba(255, 255, 255, 0.5);
	
	font-size: 1.5em;
	color: #fff;
	text-shadow:rgba(0,0,0,.8) -1px -1px;
	border-radius: 5px;
	z-index: 20;
	
}

画面に対して「div class=”graylayer”」が全体を覆うようにwidth: 100%;height100%;を指定しましょう

 

では、ボタンをクリックすると、「section class=”window”」に囲まれた部分がフェードインしてくるように作っていこうと思います。

モーダルウィンドウの構造は、多くの場合ざっと3階層の作りになっています。

overlay_3

<body>の上にある「<div class=”graylayer”>」、その上に「<section class=”window”>」が続いています。
今回、この中の<div class=”graylayer”>が、モーダルウィンドウのあのふわっと暗くなる役を担うのです。

<div class=”graylayer”>はHTMLで書いてもいいのですが、jQueryでモーダルウィンドウを制御するので、万が一jQueryが動作しない環境の場合、無駄なHTMLが存在することになってしまいます。

なので、jQeuryでこのレイヤーを作成します。

 $(function(){
	$("body").append('<div class="graylayer"></div>');
})

bodyの最後尾に作成しました!ちなみに<div class=”graylayer”>はあとで表示するために今はdisplay:none;で隠しておきます。

次に、クリックした時のアクションを設定しましょう。

$('button').click(function(){
 $(".graylayer").fadeIn();
 $(".window").fadeIn();
 return false;
})

buttonをクリックすると、.graylayerそして.windowがフェードインしてくるという意味です。そのままですね!これだけで完成です。
今回の場合はreturn false;は無くても大丈夫です。(aリンクをクリックした時にウィンドウ出現させたい場合は必須)

モーダルウィンドウが閉じなくては困るので、別の箇所をクリックするとフェードアウトするようにします。

$(".graylayer").click(function(){
	$(this).fadeOut();
	$('.window').fadeOut();
})

さらに、せっかくなのでウィンドウ(.window)を中央寄せにしようと思います。
現在のCSS指定でこの部分

position: fixed;
top: 50%;
left:50%;

positionに加え、縦横に50%の指定をし、同じ方向に「要素の幅、高さの半分の値のネガティブマージン」を指定することで中央寄せになります。

超簡単!jQueryプラグイン無しでモーダルウィンドウを実装

けれど、今回のように要素の幅(=.windowの幅)がわからない、もしくはどうしても要素に幅を指定したくない場合があります。
なのでJavascriptのメソッドを使って要素の幅・高さを取得し、ネガティブマージンを指定します。

var secHeight = $(".window").height() *0.5
var secWidth = $(".window").width() *0.5

var Heightpx = secHeight * -1;
var Widthpx = secWidth * -1;

varを使って変数を定義します。

紛らわしいのですが、「.window」というクラスが当てられているオブジェクトの「高さ….height()」、「幅…width()」を取得しています。
それに0.5を掛け算して、要素の高さ、幅の半分の値を出しています。
そのあとさらに-1で掛け算しているのは、ネガティブマージンだからですね。マイナスの値にするためです。

ではこれを使って、<section class=”window”>に、JQueryでCSSを設定します。

$(".window").fadeIn().css({
 "margin-top" : Heightpx + "px" ,
 "margin-left" : Widthpx + "px"
});

fadeInに続けて書きます。別々で指示をしてもいいのですが、こうして続けて書いたほうが処理が円滑だそうです。
なので暗黙の了解として黙ってこう書いておきましょう…

Heightpx」や「Widthpx」は先程の変数ですね。「section class=”window”」の高さ・幅の半分の値が入っています

これで、正確なセンタリングができました!簡素なりに多少はカッコが付きます。

全部書くとこんな感じです!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
	
  $(function(){  		
  				  		
	$("body").append('<div class="graylayer"></div>');
	$(".graylayer").click(function(){
		$(this).fadeOut();
		$('.window').fadeOut();
	})
	$('button').click(function(){				
		
	var secHeight = $(".window").height() *0.5
	var secWidth = $(".window").width() *0.5

	var Heightpx = secHeight * -1;
	var Widthpx = secWidth * -1;
	
	$(".graylayer").fadeIn();
	$(".window").fadeIn().css({
		"margin-top" : Heightpx + "px" ,
		"margin-left" : Widthpx + "px"
	});
				
	return false;
})
})			
</script>
<style>

html,body {
	font-family:Lucida sans , "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	margin: 0;
	padding: 0;
	}

#container{
	width:100px;
	margin:100px auto;
}

button{
	width: 80px;
	padding: 10px;
	background-color: #c9c9c9;
	border-radius: 4px;
}

	
.graylayer{
	display:none;
	position: fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-color: #000;
	opacity:.7;
	filter(alpha=70);
	}
.window{
	padding: 20px;
	display:none;
	position: fixed;
	top: 50%;
	left:50%;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);
	background-color: rgba(255, 255, 255, 0.5);
	
	font-size: 1.5em;
	color: #fff;
	text-shadow:rgba(0,0,0,.8) -1px -1px;
	border-radius: 5px;
	z-index: 20;
	
}
</style>

<body>
	<div id="container">
		<button>ウィンドウ</button>
		<section class="window">
		  <h1>現れましたか?</h1>
		  <section>
		  	<p>classに"hideWindow"と設定した部分がフェードインしてきます。</p>
		  </section>  
		</section>
	</div>
</body>

デモはこちら。
モーダルウィンドウ デモページ

 

プラグインを使うよりも、理解してしまった方がスピーディーだと思いませんか?
CSSで.graylayer{~…}のbackground-colorを変えるだけでもガラっと印象が変わります^^

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。