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

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

１．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