【jQuery】animatedModal.jsで動きのあるモーダルウインドウを簡単に実装する方法

animatedModal.jsを入れると動きのあるモーダルウィンドウが簡単に実装できたので、メモとして残しておきます。

そもそもモーダルウィンドウって何？

名称だけだと何かわかりませんが、最近は「Webサイトのロード画面」「スマホのメニュー表示」「サイトを利用する上での注意書き表示」などで使われているギミックです。

Webサイトは基本的にスクロールして文章を読みますが、それとは別に、何かのボタンを押したりWebサイトを表示したタイミングで、画面いっぱいに表示させてユーザーの操作を占有する画面がモーダルウィンドウになります。

具体的には下記のようなギミックになります。

モーダルウインドウ１

閉じる

導入するメリットは？

すべて主観ですが、下記のようなメリットがありそうです。

画面を占有するのでユーザーの意識を確実に画面内に向けることができる
画面を占有するのでユーザーに入力やクリックなどを~~強要する~~促すことができる
動きがあるので凝ったサイトであるように思える

導入するデメリットは？

こちらもすべて主観ですが、下記のようなデメリットがありそうです。

画面ロード後に表示するなど、表示のタイミングによってはユーザーのストレスが溜まる
無駄に多用するとユーザーのストレスが加速する
画面やボタンの配置など、UIの設計次第ではユーザーのストレスがより加速する
不具合でモーダルウィンドウが閉じなかったりするとユーザーのストレスが更に加速する
スマホやパソコンの操作に慣れていないユーザーは操作ができなくてストレスが天に昇る

要約すると「しっかり作りこまないとダメなサイトになってしまう」というデメリットがあります。

とはいえ、Webサイトは基本的に「なんかすごい！」「たのしそう！」「期待できる！」というポジティブな感情が引き出せれば成功なので、しっかりと組んでメリットを引き出せれば基本的にはプラスになると思います。

animatedModal.jsの使い方

基本的な使い方は下記サイトを参考にしてください。
参考： animatedModal.js

まずはhead内でanimate.CSSファイルを読み込みます。

<head>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>

※下記のようにjQueryを使って後からhead内に読み込むことで、特定のページのみCSSを読み込むことも可能です。

<script>
  jQuery(function($){
    $('head link:last').after('<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">');
  });
</script>

次に、body内にモーダルウィンドウのタグの打ち込みます。
本記事のモーダルウインドウの例は下記のようなコードを打ち込んでいます。

<a id="demo01" href="#animatedModal" class="btn">モーダルウインドウ１</a>
<div id="animatedModal">
  <p style="margin-top: 40px; text-align: center;"><a class="close-animatedModal btn" style="border-radius: 100px;">閉じる</a></p>
  <div class="modal-content flex-center">
    <div style="margin: 0px 10px;">
      <p style="margin: 0px 0px 5px;text-align: center;font-size: 1em;">見出し１</p>
      <p style="margin: 0px;"><img src="/wp/wp-content/uploads/2019/07/child_theme.jpg"></p>
    </div>
    <div style="margin: 0px 10px;">
      <p style="margin: 0px 0px 5px;text-align: center;font-size: 1em;">見出し２</p>
      <p style="margin: 0px;"><img src="/wp/wp-content/uploads/2019/06/42f0f3947d7ca2b1a713bfa40e4f558e_s.jpg"></p>
    </div>
    <div style="margin: 0px 10px;">
      <p style="margin: 0px 0px 5px;text-align: center;font-size: 1em;">見出し３</p>
      <p style="margin: 0px;"><img src="/wp/wp-content/uploads/2019/09/spamblock-cat.jpg"></p>
    </div>
  </div>
</div>
<a id="demo02" href="#lightSpeedIn" class="btn">モーダルウインドウ２</a>
<div id="lightSpeedIn">
  <p style="margin-top: 40px; text-align: center;"><a class="close-lightSpeedIn btn" style="border-radius: 100px;">閉じる</a></p>
  <div class="modal-content flex-center">
    <div style="margin: 0px 10px;">
      <p style="margin: 0px 0px 5px;text-align: center;font-size: 1em;">見出し１</p>
      <p style="margin: 0px;"><img src="/wp/wp-content/uploads/2019/07/child_theme.jpg"></p>
    </div>
    <div style="margin: 0px 10px;">
      <p style="margin: 0px 0px 5px;text-align: center;font-size: 1em;">見出し２</p>
      <p style="margin: 0px;"><img src="/wp/wp-content/uploads/2019/06/42f0f3947d7ca2b1a713bfa40e4f558e_s.jpg"></p>
    </div>
    <div style="margin: 0px 10px;">
      <p style="margin: 0px 0px 5px;text-align: center;font-size: 1em;">見出し３</p>
      <p style="margin: 0px;"><img src="/wp/wp-content/uploads/2019/09/spamblock-cat.jpg"></p>
    </div>
  </div>
</div>
<a id="demo03" href="#bounceIn" class="btn">モーダルウインドウ３</a>
<div id="bounceIn">
  <p style="margin-top: 40px; text-align: center;"><a class="close-bounceIn btn" style="border-radius: 100px;">閉じる</a></p>
  <div class="modal-content flex-center">
    <div style="margin: 0px 10px;">
      <p style="margin: 0px 0px 5px;text-align: center;font-size: 1em;">見出し１</p>
      <p style="margin: 0px;"><img src="/wp/wp-content/uploads/2019/07/child_theme.jpg"></p>
    </div>
    <div style="margin: 0px 10px;">
      <p style="margin: 0px 0px 5px;text-align: center;font-size: 1em;">見出し２</p>
      <p style="margin: 0px;"><img src="/wp/wp-content/uploads/2019/06/42f0f3947d7ca2b1a713bfa40e4f558e_s.jpg"></p>
    </div>
    <div style="margin: 0px 10px;">
      <p style="margin: 0px 0px 5px;text-align: center;font-size: 1em;">見出し３</p>
      <p style="margin: 0px;"><img src="/wp/wp-content/uploads/2019/09/spamblock-cat.jpg"></p>
    </div>
  </div>
</div>

上記で重要なタグは1,2,3行目、19,20,21行目、37,38,39行目になります。
animatedModal.jsは下記のような規則に則って入力をした場合のみ機能します。

モーダルウィンドウを開くボタン（※上記1,19,37行目）にはidとhrefを付ける
モーダルウィンドウとして表示する要素（※上記2,20,38行目）にはidを付ける
開くボタンのhref属性にはモーダルウィンドウとして表示する要素のidを指定する
モーダルウィンドウを閉じるボタン（※上記3,21,39行目）にはclassを付ける
モーダルウィンドウを閉じるボタンのclassには「close-」という文字と、モーダルウィンドウとして表示する要素に付けたidを組み合わせた「close-id名」のclass名を指定する。

文字だけだと難しそうに見えますが、上記の注意点とコードを見比べればなんとなく理解できると思います。

次にjQueryのライブラリとanimatedModal.jsファイルを読み込みます。
読み込みの順番は①jQueryライブラリ、②animatedModal.jsファイルの順番に読み込みましょう。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/wp/wp-content/themes/maxwell-child/js/animatedModal.min.js"></script>

最後に、モーダルウィンドウを開くボタンに指定したidに対して、下記のスクリプトを実行します。

<script>
  $('#demo01').animatedModal();
  $('#demo02').animatedModal({animatedIn: 'lightSpeedIn',animatedOut: 'bounceOutDown'});
  $('#demo03').animatedModal({animatedIn: 'bounceInUp',animatedOut: 'bounceOutDown'});
</script>

idに「demo01」を指定した要素のモーダルウィンドウは、パラメータに何も指定していないのでデフォルトの機能になります。
idに「demo02」「demo03」を指定した要素のモーダルウィンドウは、パラメータに「animatedIn」と「animatedOut」を指定することで通常とは違うアニメーションを設定しています。

「animatedIn」はモーダルウィンドウを表示する際のアニメーションの指定、「animatedOut」はモーダルウィンドウを閉じる際のアニメーションの指定になります。

全てのオプションの確認はしていないのですが、アニメーションの種類はAnimate.cssの種類分あると思うので、好みのアニメーションを下記の参考サイトから探して指定をしてみてください。
参考： Animate.css

慣れてしまうと結構簡単なので、ぜひ使ってみてください。

そもそもモーダルウィンドウって何？

導入するメリットは？

導入するデメリットは？

animatedModal.jsの使い方

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル