Help us understand the problem. What is going on with this article?

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

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

公式サイト
http://www.humaan.com/modaal/

プレビュー

ezgif-2-0839954934e9.gif

実装

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ファイルを読み込んでおきます。
  • モーダルを出したいボタンに、分かりやすいクラスをつけておきましょう。
    • 今回の例では、modal-buttonというクラスをつけました。
  • モーダル表示したいコンテンツにID(今回はmodal)をつけ、display: none;で非表示にしておきましょう。
  • scriptタグ内にモーダルの処理を記述します。
    • content_sourceに、モーダルのID, 今回はfullscreen表示したいので、fullscreen: trueとします。

まとめ

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

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

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

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

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

kei2ro
Webエンジニア 2017卒 メイン言語 PHP, フレームワークはBEARとLaravelを触っています。 最近は自サービスのグロースのためにLINEとの連携施策を遂行中。 エンジニアリング以外に、ディレクション業務もやります。 ものづくり楽しい。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした