モーダル実装ならとりあえずmodaalで良いのではという話

公式

http://humaan.com/modaal/
https://github.com/humaan/Modaal

なんでmodaalか

cdnもあり導入が楽

<script src="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css">

jqueryを読み込んでいる事が前提ですが、上記だけで準備は完了します。

あとは以下の例のようにモーダルで表示させたい要素に合わせてスクリプトを記述すれば完了です。

$(document).ready(function () {
  // 動画用スクリプト
  $('.hogehoge').modaal({
    type: 'video'
  });
});

フラットデザインな見た目

一昔前のモーダルプラグインと違って最近のデザインに沿った見た目なので、
cssでのカスタマイズが少なく済みます。

自分が実装した直近の例だと、
・インライン再生の予定だったyoutubeがモーダル実装になった。
・一部ページが掲載する内容が少なくなってしまったので、モーダル実装になった。
というような要件の時にカスタマイズせずデフォルトで実装しました。

よくある要件がデフォルトで実装されている。

モーダルを実装する上で要件とされる事が多い

・モーダルのレスポンシブ対応。
・モーダル展開時のスクロール不可
・画像モーダルのグループ化

が、デフォルトで実装されています。

充実したオプション・イベント

かなりの数があるので、使用頻度が多い物だけ紹介いたします。
https://github.com/humaan/Modaal#22-configuration-options

$('.fugafuga').modaal({
　// オプション

  // モーダルが表示、非表示されるまでに秒数設定
  animation_speed: 300,
　// overlayの色の設定 
  background: "#000"
　// overlayの透過量
  overlay_opacity: "0.8",
　// 開く前に発火
　before_open: function() {
　　alert('Before open');
　},
　// 閉じた後に発火
　after_close: function() {
　　alert('after close');
　}	
});

//特定の要素を閉じるボタンに設定
$('.piyopiyo').modaal('close');

まとめ

簡単な実装でも細かい要件がある実装でも幅広く使えるプラグインです。
モーダル実装の機会があれば一度使ってみてください。