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

[html] <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 ;"> [/html]

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

[javascript] <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> [/javascript]

スタイルシート

[css] .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 ; } [/css]