【jQuery】fancyboxをカスタマイズしたい

いつもお世話になっております。

###前提・実現したいこと
http://fancyapps.com/fancybox/
jQueryのプラグイン、「fancybox」を使用して、モーダルウィンドウにて
別のhtmlを表示させる、という動作をしております。

通常、モーダルウィンドウで表示したhtml内部のリンクをクリックすると、
モーダルウィンドウ内で画面推移いたしますが、
これを、リンクをクリックした際にモーダルウィンドウを閉じ、
閉じた上でリンク先に飛ぶようにしたいです。

画面推移参考イメージ

使用しているソースは以下になります。
###該当のソースコード

javascript
1<script type="text/javascript">
2$(document).ready(function () {
3  $('.link_fcb').fancybox({
4    autoSize  : false,
5    fitToView : true,
6    'height' : 435,
7    openEffect: 'none',
8    closeEffect: 'none'
9  });
10});
11</script>

html
1<body>
2<!--page01.html-->
3<a href="page01_open.html" data-fancybox-type="iframe" target="_blank" class="link_fcb">テスト開く</a><br>
4<a href="page01_open.html" data-fancybox-type="iframe" target="_blank"  class="link_fcb">テスト開く</a><br>
5</body>

html
1<body>
2<!--page02.html-->
3 <table>
4  <thead>
5   <tr>
6    <th>選択</th>
7   </tr>
8  </thead>
9  <tbody>
10   <tr>
11    <td class="txac"><a href="test_open02.html" class="btn ">選択</a></td>
12   </tr>
13   <tr>
14    <td class="txac"><a href="test_open02.html" class="btn w80">選択</a></td>
15   </tr>
16   <tr>
17    <td class="txac"><a href="test_open02.html" class="btn w80">選択</a></td>
18   </tr>
19  </tbody>
20 </table>
21</body>

モーダルウィンドウの表示までは難なくできたのですが、
window.close();で閉じることもできませんでした。。

ご教授頂けますと幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript
1// Documentation > API Methods
2$.fancybox.close( true ); // これで閉じれると思います

追記：

あ、iframeですね、見落としていました。

JavaScript
1parent.$.fancybox.close();

【FancyBoxのiframeでクローズボタンを自作する | Mawatari.jp】
http://mawatari.jp/archives/fancybox-original-close-button-within-an-iframe

投稿2016/09/23 09:32

編集2016/09/23 09:48

kei344

総合スコア69407

miyoshi_work

2016/09/23 09:43 編集

ご回答ありがとうございます！ fancyboxに独自にタグがあったのですね…調べが足りませんでした $(function(){ $('.btn').click(function(){ console.log("テスト"); $.fancybox.close( true ); }); }); こちらで、「選択」を押した際にcloseする、のつもりで記述しましたが動作しませんでした…consoleは動いたので動作はしてそうなのですが…