[javascript入門] おすすめモーダルダイアログが簡単に実装できるライブラリ5選

2022-05-24

はじめに

モーダルダイアログとは、表示されたメッセージやポップアップウィンドウを閉じたり入力しありしなければ、他の操作を行うことができないダイアログのことを言います。

よくログインや会員登録や連絡先フォームなどで用いられます。

今回はこのモーダルダイアログを簡単に実装することができるライブラリを紹介いたします。

簡単に実装可能なModal Dialog ライブラリ5選

animatedModal

animatedModalはjQueryプラグインの１つで、アニメーションが加わったデザイン性が抜群のモーダルライブラリとなります。

下記のように、cssとjsファイル（2つ）を読み込み、animatedModal()を記載するだけで、簡単に実装が可能となります。

<head>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
    <script>
    $("#demo01").animatedModal();
    </script>
</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>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="yourPath/animatedModal.min.js"></script>
</body>

animatedModal

IZIMODAL

IZIMODALは設定がとても簡単でオプションも充実しているアニメーションモーダルダイアログ作成用jQueryプラグインです。

直接iziModalサイトにアクセスし、ダウンロードします。
jQuery本体とIZIMODALのjsファイルやcssファイルが同梱されているので、それらを作成したいHTMLファイルに読み込みます。iziModal()関数を入力することで簡単に実装可能です

<head>
    <script type="text/javascript" src="./js/jquery-3.2.1.min.js">
    </script> <script type="text/javascript" src="./js/jquery-migrate-3.0.0.min.js"></script>
    <script type="text/javascript" src="./js/iziModal.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/iziModal.css" media="screen" />
    <script>
        $("#modal").iziModal();
    </script>
</head>
<body>
    <!-- Modal structure -->
    <div id="modal"> <!-- data-iziModal-fullscreen="true"  data-iziModal-title="Welcome"  data-iziModal-subtitle="Subtitle"  data-iziModal-icon="icon-home" -->
        <!-- Modal content -->
    </div>

    <!-- Trigger to open Modal -->
    <a href="https://github.com/marcelodolza/iziModal" class="trigger">Modal</a>
</body>

IZIMODAL

Fancybox

FancyboxはjQueryプラグインの一つで、サイト内の画像をクリックすると、モーダルでポップアップする機能を提供してくれるライブラリです。画像ギャラリーなどの作成時などで利用するケースが多いかと思います。

CDNが用意されているので、そのまま利用すると下記のようなイメージです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link　rel="stylesheet"　href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"/>
    <title>FancyBox</title>
    </head>
<body>
  <p>
    <a class="fancybox" href="img/test01.jpg" title="test1" target="_blank"><img src="img/test01_thumb.jpg"></a>
    <a class="fancybox" href="img/test02.jpg" title="test2" target="_blank"><img src="img/test02_thumb.jpg"></a>
    <a class="fancybox" href="img/test03.jpg" title="test3" target="_blank"><img src="img/test03_thumb.jpg"></a>
  </p>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
  <script>
    $(document).ready(function() {
        $('.fancybox').fancybox();
    });     
  </script>
</body>
</html>

Fancybox

Modaal

こちらも簡単にモーダルを実装することができるjQueryプラグインです。WCAG2.0 レベルAAでアクセス可能なプラグインで、アクセシビリティの確保されたモーダルを作成することができます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css">
    <title>Modaal</title>
    </head>
<body>
  <a href="#inline" class="inline">Show</a>
  <div id="inline">
    Inline content goes here...
  </div>
  <script src="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js"></script>
  <script>
    $(".inline").modaal({
      content_source: '#inline'
    });   
  </script>
</body>
</html>

Modaal

VenoBox

VenoBoxはとても有名なjQueryプラグインでしょう。
VenoBoxが優れている点としては、画像やテキストだけでなくGoogleMapやYoutube、Vimeoといった様々なメディアをモーダルで表示することができる点です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.9.3/venobox.css">
    <title>VenoBox</title>
    </head>
<body>
  <a class="my-link" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>
  <a class="my-link" data-vbtype="iframe" href="http://example.com/">open iFrame</a>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.9.3/venobox.min.js"></script>
  <script>
    new VenoBox({
      selector: ".my-link"
    });  
  </script>
</body>
</html>

VenoBox