Magnific Popupつかってみた

yasuko
結婚したい芸能人ランキング2位はヒロミです

クリックしたら背景が暗くなって画像などがぽよよんと出てくる、あれ。

なんてワードで検索すれば見つけ出せるかわからないままさまようことありますね。

「モーダルウィンドウ」と呼びます。

サクッとつかってみよう

Magnific Popup

こちらのプラグインを使います。

ダウンロードしたzipのなかにある「dist」内のcssとjsを使います。

<link rel="stylesheet" href="css/magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script>
    $( document ).ready( function () {
      $( '.modal' ).magnificPopup( {
        type: 'image'
      } );
    } );
  </script> 
<div>
<a href="#" class="modal">クリックすると画像がぽよよんと出てくるよ</a>
</div>

type: ‘image’ には画像以外も指定できます。

Googlemapのiframeとか

Youtubeのiframeとか

モーダルで開きたいものはいろいろあるもんです。

jQueryライブラリの読み込みもお忘れなく!

公式サイト

Magnific Popup

Magnific-Popup GitHub