テック

「Micromodal.js」を利用してモーダルウインドウを実装する方法

2023年9月23日 by single コメントはまだありません

「Micromodal.js」を利用してモーダルウインドウを実装する方法

導入方法

CDN

以下のファイルをJSファイルを読み込んでください。

<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>

または、

<script src="https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.js"></script>

HTMLマークアップ

まず、DIVタグでモーダルダイアログの領域を定義します。

<div id="modal-1" aria-hidden="true" class="modal">
  ...
</div>

次に、モーダルダイアログのダイアログ外の背景領域を定義します。通常、この領域をクリックするとモーダルダイアログが閉じられます。

<div id="modal-1" aria-hidden="true" class="modal">
  <div tabindex="-1" data-micromodal-close>
    ...
  </div>
</div>

「data-micromodal-close」属性は、クリックすると、モーダルダイアログが閉じられる属性になります。

<div id="modal-1" aria-hidden="true" class="modal">
  <div tabindex="-1" data-micromodal-close>
    <div role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >
      ...
    </div>
  </div>
</div>

「role=”dialog”」はダイアログ領域を認識させる属性です。

<div id="modal-1" aria-hidden="true" class="modal">
  <div tabindex="-1" data-micromodal-close>
    <div role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >
      <header>
        <h2 id="modal-1-title">
          ...
        </h2>
      </header>
    </div>
  </div>
</div>

また、「aria-labelledby=”modal-1-title”」はモーダルダイアログのタイトル領域を示す属性になります。

<div id="modal-1" aria-hidden="true" class="modal">
  <div tabindex="-1" data-micromodal-close>
    <div role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >
      <header>
        <h2 id="modal-1-title">
          ...
        </h2>
　       <button aria-label="Close modal" data-micromodal-close>×</button>
      </header>
    </div>
  </div>
</div>

属性「data-micromodal-close」を設定したボタンを設置すれば、閉じるボタンが実装できます。

<div id="modal-1" aria-hidden="true" class="modal">
  <div tabindex="-1" data-micromodal-close>
    <div role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >
      <header>
        <h2 id="modal-1-title">
          ...
        </h2>
　       <button aria-label="Close modal" data-micromodal-close>×</button>
      </header>
    </div>
  </div>
</div>
<button data-micromodal-trigger="modal-1" class="modal-open">開く</button>

モーダルダイアログを開くボタンを設置します。

属性「data-micromodal-trigger」の値にモーダルダイアログ領域のIDを指定すればモーダルダイアログを開くボタンを設置できます。

MicroModal初期化

最後に「MicroModal」を初期化してください。

<script>
  MicroModal.init();
</script>

サンプル／デモ

デモ１

サイトにも記載されているもっともシンプルなサンプルになります。

サンプル

スタイルシートの定義が最低限しかないため、俗にいう「モーダルダイアログ」のようには表示されません。

HTMLコード

<html>
  <head>
    <title>Micromodal</title>
    <script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
    <style type="text/css">
      .modal {
        display: none;
      }
      .modal.is-open {
        display: block;
      }
    </style>
    </head>
  <body>
    <!-- [1] -->
    <div id="modal-1" aria-hidden="true" class="modal">
      <!-- [2] -->
      <div tabindex="-1" data-micromodal-close>
        <!-- [3] -->
        <div role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >
          <header>
            <h2 id="modal-1-title">
              Modal Title
            </h2>
            <!-- [4] -->
            <button aria-label="Close modal" data-micromodal-close>×</button>
          </header>
          <div id="modal-1-content">
            Modal Content
          </div>
        </div>
      </div>
    </div>
    <button data-micromodal-trigger="modal-1" class="modal-open">開く</button>
    <script>
      MicroModal.init();
    </script>
  </body>
</html>

デモ

デモページ１

デモ２

最初のデモが最もシンプルなパターンだったので、次は、それなりにモーダルダイアログっぽくしてある、サンプルです。

以下のページを参考にしてあります。

参考ページ

サンプル

HTMLコード

<html>
  <head>
    <script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
    <title>Micromodal demo(2)</title>
    <style type="text/css">
    /* モーダル */
    .modal-overlay {
      align-items: center;
      background: rgba(0,0,0,.6);
      bottom: 0;
      display: flex;
      justify-content: center;
      left: 0;
      position: fixed;
      right: 0;
      top: 0;
      z-index: 100;
    }
    .modal-container {
      background-color: #fff;
      max-height: 80vh;
      max-width: 500px;
      overflow-y: auto;
      padding: 30px;
      width: 80%;
    }
    .modal-header {
      align-items: center;
      display: flex;
      justify-content: space-between;
    }
    .modal-close {
      background: transparent;
      border: 0;
    }
    .modal-header .modal-close::before {
      content: "\2715";
    }
    .modal-content {
      line-height: 1.5;
      margin-bottom: 2rem;
      margin-top: 2rem;
    }
    .modal-open {
      display: block;
    /* margin: 100px auto; */ 
    }
    /* モーダルアニメーション */
    @keyframes mmfadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    @keyframes mmfadeOut {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }
    @keyframes mmslideIn {
      from {
        transform: translateY(15%); /* 下からモーダル表示 */ /* -15%なら上からになります */
      }
      to {
        transform: translateY(0);
      }
    }
    @keyframes mmslideOut {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(-10%); /* 上にモーダルが消えていきます*/ /* 10%にすると下にモーダルが消えます */
      }
    }
    .micromodal-slide {
      display: none;
    }
    .micromodal-slide.is-open {
      display: block;
    }
    .micromodal-slide[aria-hidden="false"] .modal-overlay {
      animation: mmfadeIn .3s cubic-bezier(.0, .0, .2, 1);
    }
    .micromodal-slide[aria-hidden="false"] .modal-container {
      animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
    }
    .micromodal-slide[aria-hidden="true"] .modal-overlay {
      animation: mmfadeOut .3s cubic-bezier(.0, .0, .2, 1);
    }
    .micromodal-slide[aria-hidden="true"] .modal-container {
      animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
    }
    .micromodal-slide .modal-container,
    .micromodal-slide .modal-overlay {
      will-change: transform;
    }
    </style>
  </head>
  <body>
    <div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
      <div class="modal-overlay" tabindex="-1" data-micromodal-close>
        <div
          class="modal-container"
          role="dialog"
          aria-modal="true"
          aria-labelledby="modal-1-title"
        >
          <header class="modal-header">
            <h2 class="modal-title" id="modal-1-title">Micromodal</h2>
            <button
              class="modal-close"
              aria-label="Close modal"
              data-micromodal-close
            ></button>
          </header>
          <div class="modal-content" id="modal-1-content">
            <p class="modal-text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
              do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Ut enim ad minim veniam, quis nostrud exercitation ullamco
              laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum
              dolore eu fugiat nulla pariatur. Excepteur sint occaecat
              cupidatat non proident, sunt in culpa qui officia deserunt
              mollit anim id est laborum.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
              do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Ut enim ad minim veniam, quis nostrud exercitation ullamco
              laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum
              dolore eu fugiat nulla pariatur. Excepteur sint occaecat
              cupidatat non proident, sunt in culpa qui officia deserunt
              mollit anim id est laborum.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
              do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Ut enim ad minim veniam, quis nostrud exercitation ullamco
              laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum
              dolore eu fugiat nulla pariatur. Excepteur sint occaecat
              cupidatat non proident, sunt in culpa qui officia deserunt
              mollit anim id est laborum.
            </p>
            <!-- /.modal-text -->
          </div>
        </div>
      </div>
    </div>
    <!-- 開くボタン -->
    <button data-micromodal-trigger="modal-1" class="modal-open">
      開く
    </button>
    <script>
      MicroModal.init({
        disableScroll: true,
        awaitOpenAnimation: true,
        awaitCloseAnimation: true
      });
    </script>
  </body>
</html>

デモ

デモページ２

デモ３

このサンプルは以下のページをもとに作成してあります。

参考ページ

サンプル

HTMLコード

<html>
  <head>
    <script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
    <title>Micromodal demo(3)</title>
    <style type="text/css">
      /**************************\
        Basic Modal Styles
      \**************************/
      .modal {
        font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
      }

      .modal__overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.6);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .modal__container {
        background-color: #fff;
        padding: 30px;
        max-width: 500px;
        max-height: 100vh;
        border-radius: 4px;
        overflow-y: auto;
        box-sizing: border-box;
      }

      .modal__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .modal__title {
        margin-top: 0;
        margin-bottom: 0;
        font-weight: 600;
        font-size: 1.25rem;
        line-height: 1.25;
        color: #00449e;
        box-sizing: border-box;
      }

      .modal__close {
        background: transparent;
        border: 0;
      }

      .modal__header .modal__close:before { content: "\2715"; }

      .modal__content {
        margin-top: 2rem;
        margin-bottom: 2rem;
        line-height: 1.5;
        color: rgba(0,0,0,.8);
      }

      .modal__btn {
        font-size: .875rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
        background-color: #e6e6e6;
        color: rgba(0,0,0,.8);
        border-radius: .25rem;
        border-style: none;
        border-width: 0;
        cursor: pointer;
        -webkit-appearance: button;
        text-transform: none;
        overflow: visible;
        line-height: 1.15;
        margin: 0;
        will-change: transform;
        -moz-osx-font-smoothing: grayscale;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transition: -webkit-transform .25s ease-out;
        transition: transform .25s ease-out;
        transition: transform .25s ease-out,-webkit-transform .25s ease-out;
      }

      .modal__btn:focus, .modal__btn:hover {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }

      .modal__btn-primary {
        background-color: #00449e;
        color: #fff;
      }



      /**************************\
        Demo Animation Style
      \**************************/
      @keyframes mmfadeIn {
          from { opacity: 0; }
            to { opacity: 1; }
      }

      @keyframes mmfadeOut {
          from { opacity: 1; }
            to { opacity: 0; }
      }

      @keyframes mmslideIn {
        from { transform: translateY(15%); }
          to { transform: translateY(0); }
      }

      @keyframes mmslideOut {
          from { transform: translateY(0); }
          to { transform: translateY(-10%); }
      }

      .micromodal-slide {
        display: none;
      }

      .micromodal-slide.is-open {
        display: block;
      }

      .micromodal-slide[aria-hidden="false"] .modal__overlay {
        animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
      }

      .micromodal-slide[aria-hidden="false"] .modal__container {
        animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
      }

      .micromodal-slide[aria-hidden="true"] .modal__overlay {
        animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
      }

      .micromodal-slide[aria-hidden="true"] .modal__container {
        animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
      }

      .micromodal-slide .modal__container,
      .micromodal-slide .modal__overlay {
        will-change: transform;
      }

    </style>
  </head>
  <body>
    <div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
      <div class="modal__overlay" tabindex="-1" data-micromodal-close>
        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
          <header class="modal__header">
            <h2 class="modal__title" id="modal-1-title">
              Micromodal
            </h2>
            <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
          </header>
          <main class="modal__content" id="modal-1-content">
            <p>
              <code>タブ</code> キーを押せば、フォーカスたモーダル内でどのように移動するかわかると思います。また、 <code>esc</code> キーを押すとモーダルが閉じます。.
            </p>
          </main>
          <footer class="modal__footer">
            <button class="modal__btn modal__btn-primary">続ける...</button>
            <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">閉じる</button>
          </footer>
        </div>
      </div>
    </div>
    <!-- 開くボタン -->
    <button data-micromodal-trigger="modal-1" class="modal-open">
      開く
    </button>
    <script>
      MicroModal.init({
        onShow: modal => console.info(`${modal.id} is shown`), // [1]
        onClose: modal => console.info(`${modal.id} is hidden`), // [2]
        openTrigger: 'data-micromodal-trigger', // [3]
        closeTrigger: 'data-micromodal-close', // [4]
        openClass: 'is-open', // [5]
        disableScroll: true, // [6]
        disableFocus: false, // [7]
        awaitOpenAnimation: false, // [8]
        awaitCloseAnimation: false, // [9]
        debugMode: true // [10]
      });
    </script>
  </body>
</html>

デモ

デモページ３

オプション

オプション一覧

onShow

モーダルダイアログ表示時に呼び出されるコールバック関数を指定できるオプションです。

onClose

モーダルダイアログが閉じるときに呼び出され鵜rコールバック関数を指定できるオプションです。

openTrigger

モーダルダイアログを表示させるエレメントの属性名を指定できるオプションです。つまり開くボタンい設定する属性名を指定できるオプションです。

デフォルトは『data-micromodal-trigger』です。

closeTrigger

モーダルダイアログを閉じるエレメントの属性名を指定できるオプションです。つまり、閉じるボタンに設定する属性名を指定できるオプションです。

デフォルトは『data-micromodal-close』です。

openClass

モーダルダイアログが開いたときに適用されるカスタムクラスを指定できるオプションです。

デフォルトは『is-open』です。

disableScroll

モーダルダイアログ表示時、ページのスクロールを無効にできるオプションです。

デフォルトは『false』で、無効にはなっていません。

disableFocus

モーダルダイアログ表示時、フォーカス可能なエレメントに自動的にフォーカスを当てること無効にできるオプションです。

デフォルトは『false』で、無効にはなっていません。

awaitOpenAnimation

『true』に設定すれば、モーダルダイアログ表示時、アニメーションの終了を待ってから、モーダルダイアログ内のエレメントにフォーカスが移ることになります。

よって、モーダルダイアログ表示時にCSSにてアニメーションの定義を入れている場合には、『true』に設定してください。

awaitCloseAnimation

『true』に設定すれば、モーダルダイアログが閉じる際、アニメーションの終了を待ってから、モーダルダイアログが閉じられます。

よって、モーダルダイアログが閉じられる際に、CSSにてアニメーションの定義を入れている場合には、『true』に設定してください。

debugMode

,『true』に設定すれば、コンソールの警告を抑止することができます。

デフォルトは『false』です。

「Micromodal.js」を利用してモーダルウインドウを実装する方法

「Micromodal.js」を利用してモーダルウインドウを実装する方法

導入方法

CDN

HTMLマークアップ

MicroModal初期化

サンプル／デモ

デモ１

サンプル

HTMLコード

デモ

デモ２

サンプル

HTMLコード

デモ

デモ３

サンプル

HTMLコード

デモ

オプション

オプション一覧

onShow

onClose

openTrigger

closeTrigger

openClass

disableScroll

disableFocus

awaitOpenAnimation

awaitCloseAnimation

debugMode

ご参考

関連ページ

Related Posts

広告

アーカイブ

カテゴリー

Recent Posts