モーダルの実装でおすすめのプラグインを発見したので紹介します。
直感的な設定で簡単にモダンなモーダル実装ができます。

プレビュー

実装

https://github.com/kei2ro/modaal-practice
これから紹介するソースは上記のリポジトリにて公開していますので、手っ取り早く試したいかたはgit cloneしてお試しください。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Modaal デモページ</title>

    <!--  jQuery読み込み-->
    <script src="libs/js/jquery.min.js"></script>

    <!--  Modaal jsファイル読み込み-->
    <script src="libs/js/modaal.js" type="text/javascript"></script>

    <!--  Modaal cssファイル読み込み-->
    <link rel="stylesheet" href="libs/css/modaal.css"/>

  </head>
  <body>
  <button class="modal-button" style="width:100px;height:60px;border:3px;">Show</button>

  <!--  モーダルで表示する部分-->
  <div id="modal" style="display:none;">
    Inline content goes here...
  </div>

  <script>
    $(".modal-button").modaal({
      content_source: '#modal',
      fullscreen: true,
    });
  </script>
  </body>
</html>

解説

jQueryの読み込みが必要です。
Modaalのjsファイルとcssファイルを読み込んでおきます。
- https://github.com/humaan/Modaal
- ↑今回の実装では、こちらのリポジトリのsource/css/modaal.css, source/js/modaal.jsを使用しました。
モーダルを出したいボタンに、分かりやすいクラスをつけておきましょう。
- 今回の例では、modal-buttonというクラスをつけました。
モーダル表示したいコンテンツにID（今回はmodal)をつけ、display: none;で非表示にしておきましょう。
scriptタグ内にモーダルの処理を記述します。
- content_sourceに、モーダルのID, 今回はfullscreen表示したいので、fullscreen: trueとします。

まとめ

今回紹介したModaalですが、他にもたくさんオプションがありますので、興味のあるかたは色々とお試しください。

今回は取り上げていないのですが、
iPhoneの実機だと、モーダル内のコンテンツが多くてスクロールなどを要する場合、閉じるボタンがガタガタしてしまうことがありまして、実機で利用する際は注意が必要です。公式のデモを実機で見てみてもわかると思います。
こちらは、暫定の対応として、スクロール中は閉じるボタンを非表示にすることなどで対応できます。

また、モーダルをスクロールする際に、後ろの要素が動いて嫌だという場合は、モーダルが表示されている間だけは背景のコンテンツをfixedなどにしてあげると良いです。

などなど、実運用で使うにはもう少しカスタマイズしたいことなどあるので、余裕があったらそのケースの記事も投稿してみたいと思います。

最後まで読んでいただきありがとうございました。

jQueryプラグイン Modaal でモダンなフルスクリーンモーダルを実装する

プレビュー

実装

解説

まとめ