ITエンジニア/デザイナ向けにオープンソースを毎日紹介

モーダルウィンドウといえばリンクやボタンをクリックした際などに小さく表示されるウィンドウです。しかしスマートフォンなどの画面領域が小さいブラウザの場合、画面全体に広がって表示されます。

そんな大きなモーダルをデスクトップやタブレットでも使えるのがanimatedModal.jsです。大きく表示されるのでインパクトがあり、ユーザの目を引く仕組みができるでしょう。

animatedModal.jsの使い方

表示するとこんなに大きいです。
表示するとこんなに大きいです。

動きをアニメーションGIFにしてみました。横からスライドしてきたりする部分はCSS3のトランジションを使っています。
動きをアニメーションGIFにしてみました。横からスライドしてきたりする部分はCSS3のトランジションを使っています。

使い方はまずスタイルシートを読み込みます。

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

次にモーダルの設定をします。

<body>
    <!--Call your modal-->
    <a id="demo01" href="#animatedModal">DEMO01</a>

    <!--DEMO01-->
    <div id="animatedModal">
        <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID  class="close-animatedModal" -->
        <div class="close-animatedModal"> 
            CLOSE MODAL
        </div>

        <div class="modal-content">
                  <!--Your modal content goes here-->
        </div>
    </div>
</body>

さらにJavaScriptファイルを読み込みます。animatedModal.jsはjQueryを使います。

<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="yourPath/animatedModal.min.js"></script>
</body>

後はスクリプトを実行するだけです。

<script>
  $("#demo01").animatedModal();
</script>

通常のモーダルでは背後を暗くして表示します。その場合、暗くなった部分をクリックした際の処理を考える必要があります。animatedModal.jsの場合、ウィンドウ全体が覆われるのでそうした心配はなく、バツボタンを押すだけになります。ユーザとしても分かりやすいかも知れません。モーダルで多くの情報を載せる際に使うと良さそうです。

animatedModal.jsはJavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。

animatedModal.js

joaopereirawd/animatedModal.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2