コンテンツ内はお好きに入れてください。サンプルはこちら

<h1 style="text-align:center;color:#d36015;">モーダルウィンドウのデモ</h1>
<p>1ページ内に複数種類のモーダルウィンドウを設置するサンプルデモです。リンクテキストをクリックすると、それぞれのリンクに対応したモーダルウィンドウが開きます。モーダルウィンドウ周りのオーバーレイをクリックすると終了します。</p>

<hr style="margin: 3em 0 ;">

<!-- 1つ目のコンテンツ [開始] -->
<div id="modal-content-01" class="modal-content">
	<!-- モーダルウィンドウのコンテンツ開始 -->
	<p>1つ目のモーダルウィンドウです。全体を囲むdiv要素に[id="modal-content-01"]が設定されています。</p>
	<p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
	<p><a id="modal-close" class="button-link">閉じる</a></p>
	<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 1つ目のコンテンツ [終了] -->

<!-- 2つ目のコンテンツ [開始] -->
<div id="modal-content-02" class="modal-content">
	<!-- モーダルウィンドウのコンテンツ開始 -->
	<p>2つ目のモーダルウィンドウです。全体を囲むdiv要素に[id="modal-content-02"]が設定されています。</p>
	<p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
	<p><a id="modal-close" class="button-link">閉じる</a></p>
	<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 2つ目のコンテンツ [終了] -->

<!-- 3つ目のコンテンツ [開始] -->
<div id="modal-content-03" class="modal-content">
	<!-- モーダルウィンドウのコンテンツ開始 -->
	<p>3つ目のモーダルウィンドウです。全体を囲むdiv要素に[id="modal-content-03"]が設定されています。</p>
	<p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
	<p><a id="modal-close" class="button-link">閉じる</a></p>
	<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 3つ目のコンテンツ [終了] -->

<!-- 4つ目のコンテンツ [開始] -->
<div id="modal-content-04" class="modal-content">
	<!-- モーダルウィンドウのコンテンツ開始 -->
	<p>4つ目のモーダルウィンドウです。全体を囲むdiv要素に[id="modal-content-04"]が設定されています。</p>
	<p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
	<p><a id="modal-close" class="button-link">閉じる</a></p>
	<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 4つ目のコンテンツ [終了] -->

<!-- 5つ目のコンテンツ [開始] -->
<div id="modal-content-05" class="modal-content">
	<!-- モーダルウィンドウのコンテンツ開始 -->
	<p>5つ目のモーダルウィンドウです。全体を囲むdiv要素に[id="modal-content-05"]が設定されています。</p>
	<p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
	<p><a id="modal-close" class="button-link">閉じる</a></p>
	<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 5つ目のコンテンツ [終了] -->

<!-- 6つ目のコンテンツ [開始] -->
<div id="modal-content-06" class="modal-content">
	<!-- モーダルウィンドウのコンテンツ開始 -->
	<p>6つ目のモーダルウィンドウです。全体を囲むdiv要素に[id="modal-content-06"]が設定されています。</p>
	<p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
	<p><a id="modal-close" class="button-link">閉じる</a></p>
	<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 6つ目のコンテンツ [終了] -->

<!-- 7つ目のコンテンツ [開始] -->
<div id="modal-content-07" class="modal-content">
	<!-- モーダルウィンドウのコンテンツ開始 -->
	<p>7つ目のモーダルウィンドウです。全体を囲むdiv要素に[id="modal-content-07"]が設定されています。</p>
	<p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
	<p><a id="modal-close" class="button-link">閉じる</a></p>
	<!-- モーダルウィンドウのコンテンツ終了 -->
</div>

<p><a class="modal-syncer button-link" data-target="modal-content-01">クリックすると、1つ目のモーダルウィンドウを開きます。</a></p>
<p><a class="modal-syncer button-link" data-target="modal-content-02">クリックすると、2つ目のモーダルウィンドウを開きます。</a></p>
<p><a class="modal-syncer button-link" data-target="modal-content-03">クリックすると、3つ目のモーダルウィンドウを開きます。</a></p>
<p><a class="modal-syncer button-link" data-target="modal-content-04">クリックすると、4つ目のモーダルウィンドウを開きます。</a></p>
<p><a class="modal-syncer button-link" data-target="modal-content-05">クリックすると、5つ目のモーダルウィンドウを開きます。</a></p>
<p><a class="modal-syncer button-link" data-target="modal-content-06">クリックすると、6つ目のモーダルウィンドウを開きます。</a></p>
<p><a class="modal-syncer button-link" data-target="modal-content-07">クリックすると、7つ目のモーダルウィンドウを開きます。</a></p>
<!-- 7つ目のコンテンツ [終了] -->

<hr style="margin: 3em 0 ;">

javascript Jqueryの読み込みを忘れずに

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){

//グローバル変数
var nowModalSyncer = null ;		//現在開かれているモーダルコンテンツ
var modalClassSyncer = "modal-syncer" ;		//モーダルを開くリンクに付けるクラス名

//モーダルのリンクを取得する
var modals = document.getElementsByClassName( modalClassSyncer ) ;

//モーダルウィンドウを出現させるクリックイベント
for(var i=0,l=modals.length; l>i; i++){

	//全てのリンクにタッチイベントを設定する
	modals[i].onclick = function(){

		//ボタンからフォーカスを外す
		this.blur() ;

		//ターゲットとなるコンテンツを確認
		var target = this.getAttribute( "data-target" ) ;

		//ターゲットが存在しなければ終了
		if( typeof( target )=="undefined" || !target || target==null ){
			return false ;
		}

		//コンテンツとなる要素を取得
		nowModalSyncer = document.getElementById( target ) ;

		//ターゲットが存在しなければ終了
		if( nowModalSyncer == null ){
			return false ;
		}

		//キーボード操作などにより、オーバーレイが多重起動するのを防止する
		if( $( "#modal-overlay" )[0] ) return false ;		//新しくモーダルウィンドウを起動しない
		//if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;		//現在のモーダルウィンドウを削除して新しく起動する

		//オーバーレイを出現させる
		$( "body" ).append( '<div id="modal-overlay"></div>' ) ;
		$( "#modal-overlay" ).fadeIn( "fast" ) ;

		//コンテンツをセンタリングする
		centeringModalSyncer() ;

		//コンテンツをフェードインする
		$( nowModalSyncer ).fadeIn( "slow" ) ;

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

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

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

			} ) ;

			//現在のコンテンツ情報を削除
			nowModalSyncer = null ;

		} ) ;

	}

}

	//リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
	$( window ).resize( centeringModalSyncer ) ;

	//センタリングを実行する関数
	function centeringModalSyncer() {

		//モーダルウィンドウが開いてなければ終了
		if( nowModalSyncer == null ) return false ;

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

		//コンテンツ(#modal-content)の幅、高さを取得
		// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
//		var cw = $( nowModalSyncer ).outerWidth( {margin:true} ) ;
//		var ch = $( nowModalSyncer ).outerHeight( {margin:true} ) ;
		var cw = $( nowModalSyncer ).outerWidth() ;
		var ch = $( nowModalSyncer ).outerHeight() ;

		//センタリングを実行する
		$( nowModalSyncer ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;

	}

} ) ;
</script>

スタイルシート

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

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

.button-link{
	color: #00f ;
	text-decoration: underline ;
}

.button-link:hover{
	cursor: pointer ;
	color: #f00 ;
}