モーダルウィンドウ（プラグイン不要/デザインカスタマイズOK）

リンクをクリックしたら、ページ上にウィンドウが表示されるモーダルウィンドウの実装方法。
プラグインなどを利用するとデザインの自由度が低く使いにくいため、プラグインを利用しない実装方法です。
※ページにはjQuery本体を読み込んでおく。

サンプルページはこちら

HTML

<a data-target="con1" class="modal-open">リンク1</a>
<a data-target="con2" class="modal-open">リンク2</a>

<!--モーダルウィンドウ用のdivを追加（data-targetに指定した文字列をidに指定）-->
<div id="con1" class="modal-window">
	<div class="modal-content">
		<div class="modal-content-inner">
			
			<p>リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。</p>
			<p>リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。リンク1の内容です。</p>

		</div><!--/modal-content-inner-->
	</div><!--/modal-content-->
	<div class="modal-close"><span>×</span></div>
</div><!--/modal-window-->

<div id="con2" class="modal-window">
	<div class="modal-content">
		<div class="modal-content-inner">
			
			<p>リンク2の内容です。</p>
			
		</div><!--/modal-content-inner-->
	</div><!--/modal-content-->
	<div class="modal-close"><span>×</span></div>
</div><!--/modal-window-->

CSS

/* モーダルウィンドウ
--------------------------------------------*/

/* 表示領域外へはスクロールさせない */
.no_scroll {
	overflow: hidden;
}

/* 開くボタン */
.modal-open {
	cursor: pointer;
}
/* モーダルウィンドウ */
.modal-window {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 50vw;/*モーダルウィンドウの幅*/
	height: auto;
	z-index: 11;
}

.modal-content{
	padding: 10px;
	background-color: #fff;
	border-radius: 5px;
}
.modal-content-inner{
	padding:30px 40px;
	max-width: 100%;
	max-height: 80vh;
	overflow:auto;
	-webkit-overflow-scrolling: touch;
}
/*モーダルウィンドウ幅いっぱいでスクロール
.modal-content{
	max-width: 100%;
	max-height: 90vh;
	background-color: #fff;
	border-radius: 5px;
	overflow:auto;
	-webkit-overflow-scrolling: touch;
}
.modal-content-inner{
	padding:50px;
}
*/

/* 閉じるボタン */
.modal-close {
	position: absolute;
	top: -0.75em;
	right: -50px;
	width: 50px;
	height: 50px;
	color: #fff;
	cursor: pointer;
	text-align: center;
	vertical-align: top;
}
.modal-close span{
	font-size: 40px;
}
/* オーバーレイ */
.modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	z-index: 10;
}

/*スマホでの表示*/
@media (max-width: 767px) { 

	/* モーダルウィンドウ */
	.modal-window {
		top:45%;
		/*ウィンドウ画面上付き
		top: 2.5vh;
		transform: translate(-50%, 0%);
		*/
		width: 90vw;/*モーダルウィンドウの幅*/
	}
	.modal-content{
		padding: 5px;
		border-radius: 5px;
	}
	.modal-content-inner{
		padding:15px 20px;
	}
	/*モーダルウィンドウ幅いっぱいでスクロール
	.modal-content{
		max-width: 100%;
		max-height: 90vh;
		overflow:auto;
		-webkit-overflow-scrolling: touch;
	}
	.modal-content-inner{
		padding:15px 20px;
	}
	*/
	/* 閉じるボタン */
	.modal-close {
		position: absolute;
		top: 100%;
		right: 50%;
		margin-right: -25px;
	}
	.modal-close span{
		font-size: 40px;
	}

}

JS

/*モーダルウィンドウ
ーーーーーーーーーーー*/
$(function () {
	$('.modal-open').on('click', function() {
		$("body").addClass("no_scroll"); // 背景固定させるクラス付与
		$('body').append('<div class="modal-overlay"></div>');// オーバーレイ用の要素を追加
		$('.modal-overlay').fadeIn('slow');// オーバーレイをフェードイン
      var modals = '#' + $(this).attr('data-target');// モーダルコンテンツのIDを取得
		$(modals).fadeIn('slow');
	});
	// 閉じるボタンでモーダルを閉じる
	$('.modal-close').on('click', function() {
		$("body").removeClass("no_scroll"); // 背景固定させるクラス削除
		setTimeout(function(){
			modalClose();
		},100);
	});
	// オーバーレイクリックでモーダルを閉じる
	$(document).on('click', '.modal-overlay', function () {
		modalClose();
	});
	// リサイズしたら消す
	$(window).on('resize', function() {
		setTimeout(function(){
			modalClose();
		},100);

	});

	//モーダル閉じる用関数
	function modalClose(){
		$('.modal-window').fadeOut();
		$('.modal-overlay').fadeOut('slow',function(){
         $('.modal-overlay').remove();// オーバーレイを削除
      });
	}
});