テック

Fancybox v4でモーダルウインドウを作る方法

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

Fancybox v4でモーダルウインドウを作る方法

今回は、Facybox v4のタイプ「inline」や「iframe」を利用して、モーダルウインドウを実装してみます。

サンプル

インラインフレーム１ インラインフレーム１（data-preload＝false） インラインフレーム２（幅／高さカスタム） PDFファイル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>Fancybox Gallery demo(3)</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"  />
</head>
<body>
  <p>
    <!-- Dialog Contents -->
    <div id="dialog-content1" style="display:none;max-width:500px;">
      <h2>ダイアログ</h2>
      <p>
        <input type="text" value="" />
      </p>
      <p>
        タブキーを押しても、フォーカスがダイアログにあたり続けます。
      </p>
      <p>
        ダイアログを閉じるには、[ESC]キーを押す、オーバーレイをクリックする、または、閉じるの×ボタンを教えてください
      </p>
      <p className="margin-bottom--none">
        ダイアログが閉じられると、モーダルダイアログを開くためのエレメントにフォーカスが戻ります。ｘ
      </p>
    </div>
    <!-- Dialog Trigger -->
    <button data-fancybox="dialog" data-src="#dialog-content1" data-type="inline">ダイアログを開く(inline)</button>
    <button data-fancybox="dialog" data-src="#dialog-content1" data-type="clone">ダイアログを開く(clone)</button>
  </p>

  <p>
    <!-- Dialog Contents -->
    <div id="dialog-content2" style="display:none;max-width:500px;">
      <h2>ダイアログ(Javascript)</h2>
      <p>
        <input type="text" value="" />
      </p>
      <p>
        Javascriptで実装すれば「閉じる」ボタンも実装できます。
      </p>
      <p className="margin-bottom--none">
        type「clone」に設定すると、対象オブジェクトをコピーしてダイアログを表示します。
      </p>
      <p><button onclick="closeDialog();" style="float: right;">閉じる</button></p>
    </div>
    
    <!-- Dialog Trigger -->
    <button onclick="openDialogInline();">ダイアログを開く(inline)</button>
    <button onclick="openDialogClone();">ダイアログを開く(clone)</button>
  </p>

  <p>
    <a href="/demo/fancydaialog1.html" data-fancybox="iframe" data-type="iframe">
      インラインフレーム１
    </a>
    <a
      href="/demo/fancydaialog2.html"
      data-fancybox="iframe"
      data-type="iframe"
      data-preload="false"
    >
      インラインフレーム１（data-preload＝false）
    </a>
    <a
      href="/demo/fancydaialog1.html"
      data-fancybox="iframe"
      data-type="iframe"
      data-width="300"
      data-height="400"
    >
       インラインフレーム２（幅／高さカスタム）
    </a>
    <a
      href="data:text/html,<meta charset='utf-8' /><h2>サンプルHTML</2><p>サンプル内容</p>"
      data-fancybox="iframe"
      data-type="iframe"
    >
      ダイナミック インラインフレーム内容
    </a>
    <a  data-fancybox="iframe" data-type="pdf" href="/demo/document.pdf">
      PDFファイル
    </a>
  </p>

   <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
   <script type="text/javascript">
      Fancybox.bind('[data-fancybox="iframe"]', {
         l10n: {
           CLOSE: "閉じる",
           NEXT: "次",
           PREV: "前",
        }
      });
      var dialog;
      function openDialogInline() {
         dialog = Fancybox.show([{ src: "#dialog-content2", type: "inline" }]);
      }
      function openDialogClone() {
         dialog = Fancybox.show([{ src: "#dialog-content2", type: "clone" }]);
      }
      function closeDialog() {
         dialog.close();
      }
   </script>
</body>
</html>

デモ

実装方法

ライブラリ読み込み

まず、Fancyboxのライブラリを読み込みます。

CSSファイルインクルード

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"  />

JSファイルインクルード

HTMLのBodyブロックの終わりにJSファイルを読み込むようにしてください。

<html>
<head>
   ...
<head>
<body>
...
   <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
</body>
</html>

インラインでダイアログ生成

HTMLマークアップ

まずダイアログ領域を生成し、デフォルトで非表示にします。

<div id="dialog-content1" style="display:none;max-width:500px;">
   ...
</div>

次に、ダイアログの呼び出しボタンなどを設定します。

<button data-fancybox="dialog" data-src="#dialog-content1" data-type="inline">ダイアログを開く(inline)</button>

ボタンやリンクを設定し、属性「data-fancybox」を設定します。

そして、「data-src」属性も設定し、値に、事前に生成していたダイアログボックス領域のIDを設定することで、ダイアログ領域との紐づけができます。

data-type「inline」と「clone」とは？

data-type属性には「inline」または「clone」を指定できます。

cloneを指定すると、毎回オブジェクトをコピーし、生成しなおすので、テキストボックスなどの入力値は初期化されます。

inlineの場合は、対象オブジェクトを再表示するだけなので、前回入力値などは保存されたまま、再表示されます。

Javascriptでダイアログ生成

HTMLマークアップ

まずダイアログ領域を生成し、デフォルトで非表示にします。

<div id="dialog-content2" style="display:none;max-width:500px;">
   ...
</div>

次にダイアログ表示のためのボタンやリンクを設定します。

<button onclick="openDialogInline();">ダイアログを開く(inline)</button>

ダイアログ表示

<script type="text/javascript">
   var dialog;
   function openDialogInline() {
      dialog = Fancybox.show([{ src: "#dialog-content2", type: "inline" }]);
   }
</script>

ボタンやリンクを押すことでJavascript関数を呼び出します。

Javascript関数では、Fancyboxの「show()」メソッドを呼び出すことでダイアログが表示されます。

オプション「src」にはダイアログ領域のIDを指定してください。

ダイアログを閉じる

Javascriptでダイアログを表示させた場合、「閉じる」関数を実装すれば、閉じる処理を実装することもできます。

<script type="text/javascript">
   var dialog;
   function openDialogInline() {
      dialog = Fancybox.show([{ src: "#dialog-content2", type: "inline" }]);
   }
   function closeDialog() {
      dialog.close();
   }
</script>

show()メソッドの戻りオブジェクトで「close()」メソッドを呼び出すと、ダイアログを閉じることができます。

インラインフレームでダイアログ生成

ダイアログに別ページやPDFファイルを表示させることができます。

HTMLマークアップ

リンクの場合はまず、属性「href」に表示させたいページのURLを設定してください。

当然、属性「data-fancybox」設定する必要があります。

そして、属性「data-type」には『iframe』を設定すれば、ダイアログに別ページを表示させることができます。

<a href="/demo/fancydaialog1.html" data-fancybox="iframe" data-type="iframe">
  インラインフレーム１
</a>

ご参考

関連ページ