Ajaxでモーダルウインドウ内にテキストを読み込む〜jQuery

今回のサンプルは、モーダルウインドウ内に別のHTML文を表示し、読み込んだHTML文から更に別HTMLを読み込む仕組みです。（中級者向け）

モーダルウインドウは半透明のレイヤーをブラウザの表示領域いっぱいに広げて現在のページを隠します。そして、画像などを表示する領域をブラウザの中央部に置くものです。
代表的なものにLightBoxがあります。

今回のサンプルの表示内容は画像ではなくて、同じドメインに存在する他のHTML文とします。
これをAjaxを活用して読み込みます。
さらに、読み込んだHTML文内のリンク先をAjaxを活用して読み込む方法です。

サンプル
見出しをクリックするとモーダルウインドウが表示されます。モーダルウインドウに表示されたh1にはリンクの設定をしています。この部分をクリックするとajaxを使用して同じ場所にリンク先が表示される仕組みのものです。
HTML

        <dl>
          <dt><a href="data1.html">Lorem ipsum dolor sit amet,</a></dt>
          <dd>
            <p>Lorem ipsum dolor sit amet,.........</p>
          </dd>
          <dt><a href="data2.html">Integer rhoncus felis mauris.</a></dt>
          <dd>
            <p>Integer rhoncus felis mauris........ </p>
          </dd>
          <dt><a href="data3.html">Integer pretium porttitor lectus at tempor.</a></dt>
          <dd>
            <p>Integer pretium porttitor lectus at tempor...... </p>
          </dd>
        </dl>

CSS

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
dl dt {
	margin: 20px 50px;
	font-size: large;
	background-color: #ccc;
	border-left: 1em solid #4E39F1;
	padding-left: 10px;
	width: 600px;
	cursor: pointer;
}
dl dt a {
	color: #000;
	text-decoration: none;
}
div#glayLayer {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #333;
	filter: alpha(opacity=75);
	opacity: 0.75;
}
#overLayer {
	display: none;
	width: 400px;
	height: 400px;
	overflow: scroll;
	background: white;
	padding: 10px;
	position: fixed;
	top: 50%;
	left: 50%;
}
#overLayer img.close {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

スクリプト

$(function(){
 $("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");		
 $("#glayLayer").click(function(){
   $(this).hide();
   $("#overLayer").hide();
 });		
 $("dt").click(function(){
   $("#glayLayer").show();
   $("#overLayer").load($("a",this).attr("href")+"#mydata", null, function(){
     $("#overLayer").append("<img src='images/close.png' class='close'>").css({
       "margin-top":"-"+$("#overLayer").height()/2+"px" , 
       "margin-left":"-"+$("#overLayer").width()/2+"px" 
      }).fadeIn("slow");			
     $("#overLayer").on("click", "img.close",function(){
	$("#glayLayer").hide();
	$("#overLayer").hide();
      });
    });		
    $("body").click(function(evt){
      if( evt.target.tagName == 'A' ) {
	$("#overLayer").load($("h1 a",this).attr("href")+"#mydata", null, function(){
	  $("#overLayer").append("<img src='images/close.png' class='close'>");				
	});
	return false;		
      }
    });
     return false;
 });	
});

スクリプトの説明

次の部分はモーダルウインドウの半透明のレイヤーとコンテンツ表示領域を動的に作成しています。
append()はセレクタで指定された要素の一番最後に引数で指定した値を付け加えるメソッドです。
ここではbody要素の一番最後にdiv#glayLayerとdiv#overLayerを作成しています。
これらのdiv要素はあらかじめCSSでdisplay:noneの状態にして非表示にします。

 $("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");		

次のスクリプトはclickイベントを使用して#glayLayerをクリックしたら#glayLayerと#overLayerを非表示にしています。
これはブラウザの中央に表示されたコンテンツを消すための仕組みです。ここでのthisは#glayLayerを指します。

	
 $("#glayLayer").click(function(){
   $(this).hide();
   $("#overLayer").hide();
 });

次のスクリプトはclickイベントを使用して#glayLayerと#overLayerを表示する仕組みです。
dt要素をクリックしたら#glayLayerを表示します。
そして、#overLayerにクリックしたdt要素内のa要素のhref属性の値のファイルを#mydataの範囲で読み込みます。
読み込みが終了したら、コールバック関数で#overLayerの最後にappend()を使ってimgタグでclose.pngを読み込ませます。このxマークの画像はCSSのpositionを使用して#overLayerの任意の場所に配置します。
さらに、#overLayerの表示位置をCSSのmargin-topとmargin-leftで調整します。これでブラウザの中央に表示されるようになります。
そして非表示だった#overLayerをフェードインで表示させます。

		
 $("dt").click(function(){
   $("#glayLayer").show();
   $("#overLayer").load($("a",this).attr("href")+"#mydata", null, function(){
     $("#overLayer").append("<img src='images/close.png' class='close'>").css({
       "margin-top":"-"+$("#overLayer").height()/2+"px" , 
       "margin-left":"-"+$("#overLayer").width()/2+"px" 
      }).fadeIn("slow");			

次のスクリプトは#overLayerのimg.closeをクリックしたら#glayLayerと#overLayerを非表示にします。onメソッドを使用することで、次に再度読み込みが行われてもこのメソッドが利用できます。

$("#overLayer").on("click", "img.close",function(){
	$("#glayLayer").hide();
	$("#overLayer").hide();
      });

最後に、ajaxで読み込んだHTMLのリンク先をさらにajaxで読み込む方法が次になります。
ajaxで読み込んだHTMLの情報でイベントを行いたい場合は、bodyで発火を感知しなけなければなりません。
発火感知をbodyに仕掛けておいてもバブリングのおかげで子孫要素がクリックされても反応する仕組みです。
ただし、発火感知がbodyなら、どこをクリックしても発火してしまうのでif文で条件をつけています。if( evt.target.tagName == ‘A’ )
これで発火点である子孫要素の情報を読み取ることができます。あとは先の方法と同様にしてload()で欲しいHTMLを読み込みます。

$("body").click(function(evt){
      if( evt.target.tagName == 'A' ) {
	$("#overLayer").load($("h1 a",this).attr("href")+"#mydata", null, function(){
	  $("#overLayer").append("<img src='images/close.png' class='close'>");				
	});
	return false;		
      }
    });