fancyBoxのiframeでクローズボタンを自作する

Pocket
4 interests

fancyBoxで、iframeをフローティングウィンドウで表示する際に、デザインの都合上、オリジナルのクローズボタンを設置したいことがあると思います。方法の一つとして、iframe側のHTMLに記述したクローズボタンを機能させる方法をメモしておきます。以下に例を示します。

デフォルトのクローズボタン

fancybox-original-close-button-within-an-iframe-01

iframe側のHTMLに記述したクローズボタンの例

fancybox-original-close-button-within-an-iframe-02

iframe側のHTMLに記述したクローズボタンを機能させる方法

以下は、サンプルのソースコードです。CSSや、重要でないオプション等は省略しています。

重要なのは、2点だけです。
まず、メインファイルの26行目のように、fancyboxメソッドに、 closeBtn: falseオプションを指定すること。
そして、2点目は、iframeファイルの21行目のように、何かしらのイベント(多くの場合はクリックイベント)に parent.$.fancybox.close();をバインドすることです。

デモやソースコード一式は、以下のリンクからどうぞ。

Pocket
4 interests