jquery テキストをモーダルウィンドウに表示する

CATEGORY: jQuery | TAG:

2013年11月16日

画像ではなく、テキスト要素をライトボックス風に表示する方法のメモ。

モーダルウィンドウなどを予め HTML に記述しておく場合

  • a 要素（class=”detail_btn”）をクリックすると、詳細情報（class=”detail_info”）をライトボックス風に表示
  • 半透明のモーダルウィンドウの領域：id=”graylayer” の div 要素
  • テキスト要素を表示する領域：id=”overlayer” の div 要素
  • 「閉じる」ボタンなども予め HTML に記述
  • これらの要素は CSS で最初は非表示にしておく

HTML 抜粋

  1. ・・・省略・・・
  2. <div class="cd">
  3. <h3>ジャズ Vol.1 ～Let’s Swing～</h3>
  4. <p>Released:2012 <a class="detail_btn" href="#">（詳細）</a></p>
  5.  
  6. <div class="detail_info">
  7. <h3>ジャズ Vol.1 ～Let’s Swing～</h3>
  8. <p>誰もが楽しめるジャズシリーズ第一弾！</p>
  9. <dl>
  10. <dt>＜曲目＞</dt>
  11. <dd>
  12. <ol>
  13.   <li>A列車で行こう</li>
  14.   <li>ペーパー・ムーン</li>
  15.   <li>シング・シング・シング</li>
  16. </ol>
  17. </dd>
  18. </dl>
  19. </div><!-- end of .detail_info -->
  20.  
  21. </div><!-- end of .cd -->
  22. ・・・省略・・・
  23. <div id="graylayer"></div>
  24. <div id="overlayer">
  25.   <img src="images/close-trans.png" class="close" title="閉じる" />
  26.     <div class="detail_info"></div>
  27.     <p><a class="close_btn" href="#">（X 閉じる）</a></p>
  28. </div>
  • 表示するモーダルウィンドウは高さと幅を％で指定
  • 画面いっぱいになってしまう場合を考慮して「overflow: scroll」を指定

CSS

  1. #graylayer {
  2.   display: none;
  3.   position: fixed;
  4.   left: 0;
  5.   top: 0;
  6.   height: 100%;
  7.   width: 100%;
  8.   background: #444;
  9.   filter:alpha(opacity=75);
  10.   opacity: 0.75;
  11.   z-index: 200;
  12. }
  13. * html #graylayer {
  14.   position: absolute;
  15. }
  16. #overlayer {
  17.   display: none;
  18.   width: 80%;
  19.   background: #FFF;
  20.   padding: 10px;
  21.   position: fixed;
  22.   top: 50%;
  23.   left: 50%;
  24.   z-index: 300;
  25.   height: 90%;
  26.   overflow: scroll;
  27. }
  28. * html #overlayer {
  29.   position: absolute;
  30. }
  31. #overlayer img.close {
  32.   position: absolute;
  33.   top: 0;
  34.   right: 0;
  35.   cursor: pointer;
  36. }
  • a 要素（class=”detail_btn”）をクリックすると背景（#graylayer）を表示させ、モーダルウィンドウ（#overlayer）に表示させる内容を取得する。
  • 背景（#graylayer）や「閉じる」の文字または、画像をクリックすると非表示にする。

JavaScript

  1. jQuery(function($){
  2.   $('.cd a.detail_btn').click(function(){
  3.     var that = $(this); 
  4.     $('#graylayer').fadeIn();  
  5.     $('#overlayer').fadeIn().find('div.detail_info').html(that.closest('div.cd').find('div.detail_info').html());
  6.     $('#overlayer').css({
  7.       marginTop: "-" + $('#overlayer').height()/2 + "px",
  8.       marginLeft: "-" + $('#overlayer').width()/2 + "px"
  9.     });
  10.     return false;
  11.   });
  12.  
  13.   $('#overlayer img.close, #overlayer a.close_btn, #graylayer').click(function(){
  14.       $('#graylayer').fadeOut();
  15.       $('#overlayer').fadeOut();
  16.       return false;
  17.   });
  18. });

モーダルウィンドウなどの要素をスクリプトで追加する場合

  • 以下の部分は予め HTML には記述せず、スクリプトで追加する。
  • また、前述の場合詳細情報を表示する領域（<div class=”detail_info”></div>）を予め以下の部分にも記述しておいたが、スクリプトで追加する場合は不要。
  1. <div id="graylayer"></div>
  2. <div id="overlayer">
  3.   <img src="images/close-trans.png" class="close" title="閉じる" />
  4.     <p><a class="close_btn" href="#">（X 閉じる）</a></p>
  5. </div>
  • CSS は前述と同じもの
  • JavaScript の「閉じる」をクリックした際の記述の場所などが異なる。
  1. jQuery(function($){
  2.   $('body').append('<div id="graylayer"></div><div id="overlayer"></div>');
  3.   $('#graylayer').click(function(){
  4.     $(this).fadeOut();
  5.     $('#overlayer').fadeOut();
  6.   });
  7.   $('.cd a.detail_btn').click(function(){
  8.     $('#graylayer').fadeIn();    
  9.     $('#overlayer').fadeIn().html('<img src="images/close-trans.png" class="close" title="閉じる" />' + $(this).closest('div.cd').find('div.detail_info').html() + '<p><a class="close_btn" href="#">（X 閉じる）</a></p>').css({
  10.       marginTop: "-" + $('#overlayer').height()/2 + "px",
  11.       marginLeft: "-" + $('#overlayer').width()/2 + "px"
  12.     });
  13.     $('#overlayer img.close, #overlayer a.close_btn').click(function(){
  14.       $('#graylayer').fadeOut();
  15.       $('#overlayer').fadeOut();
  16.     });
  17.     return false;
  18.   });
  19. });

on を使う

「閉じる」ボタンなどの要素をスクリプトで追加する場合、それらの要素はページが読み込まれた時点では認識されていないので、前述のようにクリックのイベント処理の内部に「閉じる」ボタンをクリックした時の処理を記述したが、「on」を使えば以下のように記述可能。

  1. jQuery(function($){
  2.   $('body').append('<div id="graylayer"></div><div id="overlayer"></div>');
  3.   $('#graylayer').click(function(){
  4.     $(this).fadeOut();
  5.     $('#overlayer').fadeOut();
  6.   });
  7.   $('.cd a.detail_btn').click(function(){
  8.     $('#graylayer').fadeIn();    
  9.     $('#overlayer').fadeIn().html('<img src="images/close-trans.png" class="close" title="閉じる" />' + $(this).closest('div.cd').find('div.detail_info').html() + '<p><a class="close_btn" href="#">（X 閉じる）</a></p>').css({
  10.       marginTop: "-" + $('#overlayer').height()/2 + "px",
  11.       marginLeft: "-" + $('#overlayer').width()/2 + "px"
  12.     });
  13.     return false;
  14.   });
  15.   
  16.   $(document).on('click', '#overlayer img.close, #overlayer a.close_btn', function() {
  17.     $('#graylayer').fadeOut();
  18.     $('#overlayer').fadeOut();
  19.     return false;
  20.   });
  21. });

関数にする場合の注意点

クリックするリンクの href 属性を「#」にしている場合で、モーダルウィンドウを表示する処理を関数にする場合、関数の側で「return false;」を記述してもモーダルウィンドウが表示される段階ではそれが機能しないので、呼び出す側に「return false;」を記述する。

例えば、前述の以下の部分を関数にまとめる場合

  1. $('body').append('<div id="graylayer"></div><div id="overlayer"></div>');
  2.  
  3. $('.cd a.detail_btn').click(function(){
  4.   $('#graylayer').fadeIn();    
  5.   $('#overlayer').fadeIn().html('<img src="images/close-trans.png" class="close" title="閉じる" />' + $(this).closest('div.cd').find('div.detail_info').html() + '<p><a class="close_btn" href="#">（X 閉じる）</a></p>').css({
  6.     marginTop: "-" + $('#overlayer').height()/2 + "px",
  7.     marginLeft: "-" + $('#overlayer').width()/2 + "px"
  8.   });
  9.   return false;
  10. });

show_modal_window(target) という関数にする際に、「return false;」は呼び出し側に記述する。

そうしない場合、モーダルウィンドウを開く（閉じる）たびに、ページの先頭（#）に移動してしまう。

  1. $('body').append('<div id="graylayer"></div><div id="overlayer"></div>');
  2. function show_modal_window(target) {  
  3.   $('#graylayer').fadeIn();    
  4.   $('#overlayer').fadeIn().html('<img src="images/close-trans.png" class="close" title="閉じる" />' + target + '<p><a class="close_btn" href="#">（X 閉じる）</a></p>').css({
  5.     marginTop: "-" + $('#overlayer').height()/2 + "px",
  6.     marginLeft: "-" + $('#overlayer').width()/2 + "px"
  7.   });
  8.   //return false;  ここに記述しても効果はない
  9. }
  10.  
  11. $('.cd a.detail_btn').click(function(){
  12.   show_modal_window($(this).closest('div.cd').find('div.detail_info').html());
  13.   return false;    //ここに記述
  14. });