modaalをベーシックにサッと使うときやりたい最低限の設定

https://www.humaan.com/modaal/

静的なサイトなんかで「ここ、ポップアップだから」て言われたとき、サッと使えて便利なのでいまだに使うmodaal。これをベーシックにサッと使うときの最低限これ書いとけ自分、を書いておく。

目的

モダールの中には画像や文字などの一般的なコンテンツを表示させて、閉じるボタンは表示されたモダールウィンドウの中にいれる。

結論

<link rel="stylesheet" href="modaal.min.css">
<script src="jquery.js"></script>
<script src="modaal.min.js"></script>

$(function () {
  $('.js-modaal').modaal({
    hide_close: 'true'
  });

  // 閉じるボタン
  $('.js-modaal-close').on('click', function () {
    $('.js-modaal').modaal('close');
  });
});

解説

.js-modaalで開くモダールとする。

$('.js-modaal').modaal({
  hide_close: 'true'
});

閉じるボタンはモダールウィンドウの内側にいれたいので自作する必要がある。
そのために、hide_closeオプションを使って、デフォルトの閉じるボタンを削除する。

$('.js-modaal-close').on('click', function () {
  $('.js-modaal').modaal('close');
});

今回はモダールウィンドウの中に.js-modaal-closeというクラスをつけた部分を作って、そこをクリックすると閉じるようにしています。

おまけ：スムーススクロールの除外

modaal.jsは基本的にaタグでの実装となるので、場合によってはスムーススクロールとバッティングするから除外したい。
modaal.jsがjQueryなのでjQueryで書いちゃうことが多いけど、jsの場合は:not()とか使えばよいと思う。

$(function(){
  $('a[href^="#"]').not('a.js-modaal').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});