簡単で初心者でも分かりやすく作り変えやすいモーダルウィンドウをご紹介します。

まずjQueryを導入してからお使いください。

↓以下が実際のソースサンプルです。

▼html

    <div id="modal-content">
        <p>モーダルウィンドウ内のコンテンツをHTMLで自由に編集することができます。画像や、動画埋め込みなど自由にお入れ下さい。</p>
        <p>「閉じる」か「背景」をクリックすると元に戻ります。</p>
        <p><a id="modal-close" class="button-link">閉じる</a></p>
    </div>
    <p><a id="modal-open" class="button-link">このリンクをクリックするとモーダルウィンドウが表示されます。</a></p>

▼css

#modal-content {
	width: 50% ;
	margin: 0 ;
	padding: 10px 20px ;
	border: 2px solid #000 ;
	background: #fff ;
	position: fixed ;
	z-index: 2 ;
    left: 315px; 
    top: 215px; 
    display: none;
    
}
  
#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.7 ) ;
}

.button-link {
	color: #00f ;
	text-decoration: underline ;
}
 
.button-link:hover {
	cursor: pointer ;
	color: #f00 ;
}

▼jQuery

$(function(){

//モーダルウィンドウを出現させるクリックイベント
$("#modal-open").click( function(){

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

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

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

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

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

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

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

		} ) ;

	} ) ;

} ) ;

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

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

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

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

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

	}

} ) ;

今回、参考にさせていただいたのは、『 SYNCER 』 さんです。

ありがとうございます。

デモページは、こちら