jQueryでライトボックス風ポップアップ要素を作る方法・手順

よく使う特定の要素を初期では非表示にしておきボタンなどをクリックした際にライトボックス風にポップアップ的に表示させる方法です。

簡単なつくりだと表示時などに背景がスクロールされてしまうのでポップアップの際には背景がそのままとどまるように作りました。

html部基本形

<a href="" id="open-btn">開く</a>

<div id="pop-up-all-wrap">
	<div id="pop-up-content">
		<a id="close-btn" href="">閉じる</a>
	</div>
	<div id="back-shadow"></div>
</div>

CSSスタイル基本形

<style>
#pop-up-all-wrap{
	display: none;
}
#back-shadow{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	display: block;
	background: rgba(0,0,0,0.8);
	z-index: 10;
}
#pop-up-content{
	position: fixed;
	top:50px;
	left:50%;
	z-index: 100;
	width: 600px;
	margin-left: -300px;
	background: #fff;
}
</style>

jQuery部

<script>
$(function(){
	var current_scrollY;
	$('#open-btn').on('click',function(){
		current_scrollY = $( window ).scrollTop();	//現在のスクロール位置を取得
		$('#pop-up-all-wrap').fadeIn('fast');	//cssで display:none にしていたものをフェードイン
		$('body').css({'position':'fixed','width':'100%','top': -1 * current_scrollY});	//ポップアップ後に背景がスクロールしないようにposition:fixed;と現在位置を指定
		return false;	//aタグなどによるリロード処理をさせない
	});
	$('#back-shadow,.close-btn').on('click',function(){
		current_scrollY = -1 * $('body').css('top').replace('px', ''); 	//bodyインラインのstyle、topの値を取得、pxを省き絶対値に変換(そのままだと-になる)
		$('#pop-up-all-wrap').fadeOut('fast');	//ポップアップをフェードアウト
		$('body').attr('style','');	//bodyにインラインで記述したstyleを空に
		$('html,body').scrollTop(current_scrollY);	//スクロール位置を反映させる
		return false;	//aタグなどによるリロード処理をさせない
	});
});
</script>

以上です。使い安いように適宜変更してください。

備考

.scrollTop()ってブラウザ毎に挙動が少し違うのでセレクタが$(‘body’)だけだとFireFoxでは無視されましたので$(‘html,body’)にしました。。。ややこし

  • このエントリーをはてなブックマークに追加
スポンサーリンク
スポンサーリンク