fancyBoxのiframeでクローズボタンを自作する
fancyBoxで、iframeをフローティングウィンドウで表示する際に、デザインの都合上、オリジナルのクローズボタンを設置したいことがあると思います。方法の一つとして、iframe側のHTMLに記述したクローズボタンを機能させる方法をメモしておきます。以下に例を示します。
デフォルトのクローズボタン
iframe側のHTMLに記述したクローズボタンの例
iframe側のHTMLに記述したクローズボタンを機能させる方法
以下は、サンプルのソースコードです。CSSや、重要でないオプション等は省略しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>デモ - fancyBox クローズボタンを独自のものにする</title> <link rel="stylesheet" href="assets/lib/cssreset-min.css"/> <link rel="stylesheet" href="assets/lib/fancybox/jquery.fancybox.css"> <!-- 省略 --> </style> </head> <body> <div id="container"> <ul> <li><a href="default.html" data-fancybox-type="iframe" class="fancybox">デフォルト</a></li> <li><a href="original.html" data-fancybox-type="iframe" class="fancybox-original">オリジナル</a></li> </ul> </div> <script type="text/javascript" src="assets/lib/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="assets/lib/fancybox/jquery.fancybox.js"></script> <script type="text/javascript"> $(function(){ $('a.fancybox').fancybox(); $('a.fancybox-original').fancybox({ closeBtn: false }); }); </script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>デモ - fancyBox クローズボタンを独自のものにする</title> <link rel="stylesheet" href="assets/lib/cssreset-min.css"/> <!-- 省略 --> </head> <body> <div id="container"> <div id="header"> <div id="close-btn">close</div> </div> <div id="main">オリジナルデザイン</div> </div> <script type="text/javascript" src="assets/lib/jquery-2.0.0.min.js"></script> <script type="text/javascript"> $('#close-btn').click(function(){ parent.$.fancybox.close(); }); </script> </body> </html> |
重要なのは、2点だけです。
まず、メインファイルの26行目のように、fancyboxメソッドに、 closeBtn: falseオプションを指定すること。
そして、2点目は、iframeファイルの21行目のように、何かしらのイベント（多くの場合はクリックイベント）に parent.$.fancybox.close();をバインドすることです。
デモやソースコード一式は、以下のリンクからどうぞ。