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

CATEGORY: jQuery | TAG:

2013年11月16日

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

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

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

HTML 抜粋

・・・省略・・・
<div class="cd">
<h3>ジャズ Vol.1 ～Let’s Swing～</h3>
<p>Released:2012 <a class="detail_btn" href="#">（詳細）</a></p>

<div class="detail_info">
<h3>ジャズ Vol.1 ～Let’s Swing～</h3>
<p>誰もが楽しめるジャズシリーズ第一弾！</p>
<dl>
<dt>＜曲目＞</dt>
<dd>
<ol>
  <li>A列車で行こう</li>
  <li>ペーパー・ムーン</li>
  <li>シング・シング・シング</li>
</ol>
</dd>
</dl>
</div><!-- end of .detail_info -->

</div><!-- end of .cd -->
・・・省略・・・
<div id="graylayer"></div>
<div id="overlayer">
  <img src="images/close-trans.png" class="close" title="閉じる" />
    <div class="detail_info"></div>
    <p><a class="close_btn" href="#">（X 閉じる）</a></p>
</div>
  • 表示するモーダルウィンドウは高さと幅を％で指定
  • 画面いっぱいになってしまう場合を考慮して「overflow: scroll」を指定

CSS

#graylayer {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #444;
  filter:alpha(opacity=75);
  opacity: 0.75;
  z-index: 200;
}
* html #graylayer {
  position: absolute;
}
#overlayer {
  display: none;
  width: 80%;
  background: #FFF;
  padding: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 300;
  height: 90%;
  overflow: scroll;
}
* html #overlayer {
  position: absolute;
}
#overlayer img.close {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
  • a 要素（class=”detail_btn”）をクリックすると背景（#graylayer）を表示させ、モーダルウィンドウ（#overlayer）に表示させる内容を取得する。
  • 背景（#graylayer）や「閉じる」の文字または、画像をクリックすると非表示にする。

JavaScript

jQuery(function($){
  $('.cd a.detail_btn').click(function(){
    var that = $(this); 
    $('#graylayer').fadeIn();  
    $('#overlayer').fadeIn().find('div.detail_info').html(that.closest('div.cd').find('div.detail_info').html());
    $('#overlayer').css({
      marginTop: "-" + $('#overlayer').height()/2 + "px",
      marginLeft: "-" + $('#overlayer').width()/2 + "px"
    });
    return false;
  });

  $('#overlayer img.close, #overlayer a.close_btn, #graylayer').click(function(){
      $('#graylayer').fadeOut();
      $('#overlayer').fadeOut();
      return false;
  });
});

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

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

on を使う

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

jQuery(function($){
  $('body').append('<div id="graylayer"></div><div id="overlayer"></div>');
  $('#graylayer').click(function(){
    $(this).fadeOut();
    $('#overlayer').fadeOut();
  });
  $('.cd a.detail_btn').click(function(){
    $('#graylayer').fadeIn();    
    $('#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({
      marginTop: "-" + $('#overlayer').height()/2 + "px",
      marginLeft: "-" + $('#overlayer').width()/2 + "px"
    });
    return false;
  });
  
  $(document).on('click', '#overlayer img.close, #overlayer a.close_btn', function() {
    $('#graylayer').fadeOut();
    $('#overlayer').fadeOut();
    return false;
  });
});

関数にする場合の注意点

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

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

$('body').append('<div id="graylayer"></div><div id="overlayer"></div>');

$('.cd a.detail_btn').click(function(){
  $('#graylayer').fadeIn();    
  $('#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({
    marginTop: "-" + $('#overlayer').height()/2 + "px",
    marginLeft: "-" + $('#overlayer').width()/2 + "px"
  });
  return false;
});

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

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

$('body').append('<div id="graylayer"></div><div id="overlayer"></div>');
function show_modal_window(target) {  
  $('#graylayer').fadeIn();    
  $('#overlayer').fadeIn().html('<img src="images/close-trans.png" class="close" title="閉じる" />' + target + '<p><a class="close_btn" href="#">（X 閉じる）</a></p>').css({
    marginTop: "-" + $('#overlayer').height()/2 + "px",
    marginLeft: "-" + $('#overlayer').width()/2 + "px"
  });
  //return false;  ここに記述しても効果はない
}

$('.cd a.detail_btn').click(function(){
  show_modal_window($(this).closest('div.cd').find('div.detail_info').html());
  return false;    //ここに記述
});