Fancybox V4 HTML インライン コンテンツ 6つのバリエーション
- HTML Inline content

Fancybox V4 インライン コンテンツの起動方法は、Declarative(宣言型)とProgrammatic(プログラム起動型) の2つの方法があります。

1.Declarative(宣言型)- ボタンクリック起動

1.1 デフォルトの例

≫Demo a

1.2 CSS使用により、オープン/クローズ アニメーション

≫Demo b

1.3 オプションのカスタマイズにより、ダイアログを表示 - data-fancybox="dialog"

≫Demo c

1.4 オプションのカスタマイズにより、モーダルウインドウに表示 - data-fancybox="modal"

≫Demo d

2. Programmatic(プログラム型)- javascript起動

Programmatic(プログラム型)は、HTMLエレメント要素をjavascriptで表示します。

2.1 HTMLエレメント要素を表示

・起動方法
// Show HTML element
Fancybox.show([{ src: "#dialog-content", type: "inline" }]);
デモ≫

2.2 HTMLエレメント要素のコピー(クーロン)を表示

・起動方法
// Show a copy of the element
Fancybox.show([{ src: "#dialog-content", type: "clone" }]);
デモ≫

(c)urbanqee.com 2022. 4.20