ポップアップ

jqueryを使って簡単にポップアップを表示したい

ポップアップ

こんな感じで、jqueryを使って
①画像（Ａタグあり）
を表示したい、を記事にしてみました。

やり方

ヘッダーにコードを追加

＜head＞タグ内に下記のコードを追加



<link rel="stylesheet" href="/css/magnific-popup.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="/js/jquery.magnific-popup.js"></script>

＜解説＞
1.ポップアップ用のcssの読み込み
2.jqueryの読み込み
3.ポップアップ用javascriptの読み込み

ポップアップしたいコンテンツ

記事の最後に下記コードを追加



<div id="popup" class="white-popup">
     ポップアップしたい画像
</div>

＜解説＞
id=”popup”で、ポップアップする/しない、を制御します。
class=”white-popup”でポップアップ部分の装飾をします。

ポップアップ部分のCSS


ＣＳＳ（スタイルシート）に下記のコードを追加します。

.white-popup {
   position: relative;
   background: #FFF;
   padding: 20px;
   width: auto;
   max-width: 500px;
   margin: 20px auto;
}

＜解説＞
class=”white-popup”の装飾を定義していきます。

javascript部分

本文記事に下記のコードを追加します。



<script type="text/javascript">
$(window).load(function(){
     $.magnificPopup.open({
          items: {src: '#popup'},
          type: 'inline', 
          modal: true,
      }, 0);
  });
</script>

＜解説＞
2.： "$(window).load(function().." の部分は、ページ表示完了時、function()を実行します。
3～7：　$.magnificPopup.open() を使ってポップアップを表示します。
　引数　
　　items：　ポップアップするコンテンツのIDを指定
　　type：　　ポップアップタイプは inline 　　
　　modal：　モーダルなので true

magnificPopupレファレンス

コンテント・タイプ（Content Types）

Magnific Popup には以下のような４つのコンテントタイプがある。URL などから自動的に検出する機能はないので、必ず指定する（デフォルトは inline ）。

image ：画像
iframe：youtubeなど
inline：通常ほHTML
ajax

コンテンツタイプ「image」

imageタイプを選択した場合は、画像へのパスをソースとして設定する必要があります。
また以下のようなimageオプションを指定することで、ポップアップのマークアップなどを変更できます。



$('.image-link').magnificPopup({
  type:'image',
  image: {
    markup: '<div class="mfp-figure">'+
              '<div class="mfp-close"></div>'+
              '<div class="mfp-img"></div>'+
              '<div class="mfp-bottom-bar">'+
                '<div class="mfp-title"></div>'+
                '<div class="mfp-counter"></div>'+
              '</div>'+
            '</div>', // ポップアップのマークアップ。.mfp-imgはimgタグに、.mfp-closeはクローズボタンに置換される。
  
    cursor: 'mfp-zoom-out-cur', // ポップアップを表示したときのbodyタグに追加されるクラスを指定
  
    titleSrc: 'title', // 画像のタイトルを取得する属性を指定
    // 次のものはタイトルを関数で返す例です。
    // titleSrc: function(item) {
    //   return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
    // }
  
    verticalFit: true, // 垂直方向に画像を収める
  
    tError: '<a href="%url%">The image</a> could not be loaded.' // ローディングが失敗したときのエラーメッセージ
  }
});

コンテンツタイプ「iframe」

iframeタイプを選択したときは「YouTube」「Vimeo」「Google Maps」のURLを指定することで、それぞれをポップアップで表示できます。



$('.iframe-link').magnificPopup({
 type:'iframe'
});



<a href="http://www.youtube.com/watch?v=画像タグ" class="iframe-link">Youtube</a>

コンテンツタイプ「inline」

html内の要素をポップアップで表示させます。ポップアップさせたい要素に「mfp-hide」のクラス名を付けておきます。
クラス名「mfp-close」を付けたものがクローズボタンに置換されます。

javascript ソース



$(function() {
  $('.inline-link').magnificPopup({
   type:'inline'
  });
});

htmlソース



<div id="inline-popup" class="mfp-hide">
  <h1>タイトル</h1>
  <p>テキスト</p>
  <img src="画像URL" />
  <div class="mfp-close">閉じる</div>
</div>