web-dev-qa-db-ja.com

ボタンクリックからjQueryファンシーボックスを閉じる方法

fancy box を使用して、iframeを使用してポップアップを作成し、別のページを読み込みます。ここに私のコードがあります

    <script type="text/javascript">
$(document).ready(function() {

    $('.calendar .day').click(function() {
        day_num = $(this).find('.day_num').html();
        day_data = Prompt('Enter Stuff', $(this).find('.content').html());
        if (day_data != null) {

            $.ajax({
                url: window.location,
                type: 'POST',
                data: {
                    day: day_num,
                    data: day_data
                },
                success: function(msg) {
                    location.reload();
                }                       
            });
            }
        });
    });
$(document).ready(function(){
    $("a.iframeFancybox1").fancybox({
    'width'           : 800,
    'height'              : 650,
    'overlayOpacity'     :  '0.4',
    'overlayColor'       :  '#000',
    'hideOnContentClick' :   false,
    'autoScale'          :   false,
    'transitionIn'       :   'elastic',
    'transitionOut'  :   'elastic',
    'type'           :   'iframe'
    });
});

</script>

ページが正常にロードされ、処理が行われます。ただし、ポップアップフォームを閉じる代わりに、ポップアップ自体の中にポップアップソースフォームをロードします。作業が完了したらポップアップフォームを閉じ、ポップアップが生成されたメインメニューページに戻ります。ポップアップフォームのボタンクリックでこれを達成するにはどうすればよいですか。

よろしく、ランガナ

javascriptjqueryajaxcodeigniterfancybox
17
Rangana Sampath

$.fancybox.close();の呼び出し

post のこの回答もご覧ください

http://fancybox.net/faq によると

  1. 他の要素からFancyBoxを閉じるにはどうすればよいですか？ ？

OnClickイベントで$.fn.fancybox.close()を呼び出すだけです

したがって、fnを追加することができます。

35
Haim Evgi

これを適切に機能させるには、Drupalサイトでparent.jQuery.fancybox.close()を使用する必要がありました。

14
Neil

インラインコールを使用できます

<input type="button" onclick="$.fancybox.close()" value="CloseFB" />

または、次の関数を使用できます

<script>
function closeFB() {
    // Before closing you can do other stuff, like page reloading
    $("#destination_div").load("?v=staff #source_div_with_content"); 
    // After all you can close FB
    $.fancybox.close(); 
}
</script>

<input type="button" onclick="closeFB()" value="CloseFB" />

OnClickeventで関数を呼び出す

7
Alex

これは古いスレッドですが、私は2セントを共有すると思いました。

Onclickイベントを使用してfancybox iframeを閉じる際に同様の問題が発生していましたが、多くの試行の後、これは私のためのトリックを行いました：window.parent.jQuery.fancybox.close（）

入力ボタンを使用した例を次に示します。

<input type="button" class="formbutton" value="Close" onClick="window.parent.jQuery.fancybox.close();" />

同様に、アンカー（a）タグでonlickをテストしたところ、正常に機能しました。

4
Jaz

$.fn.fancybox.close()はバージョン2.xでは機能しません。実際、エラーが発生します。バージョン2.xを使用している場合は、代わりに$.fancybox.close(true)を試してください。

2
silvenon

閉じるボタンにはさまざまな機能があります：ポップアップを閉じる、fancyboxを閉じる。バブリングイベントを停止するには、e.stopPropagation（）を使用する必要があります。

$('.close-btn').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).parent().hide();
        $.fancybox.close();
});
2
Vladimir Kuzmin

シンプルなソリューション、閉じるリンクを見つけて（クラスのファンシーボックスを閉じます）、6秒（または6000ミリ秒）でそれを行います

setTimeout(function(){
    $('.fancybox-close').click();
}, 6000);
1
user1817927

これは私のために働く...

    <script type="text/javascript" src="../../js/jquery-ui.js"></script>

    <script src="../../js/fancybox-2.1.5/jquery.fancybox.js" type="text/javascript"></script>
    <script src="../../js/fancybox-2.1.5/jquery.fancybox.pack.js" type="text/javascript"></script>
    <link href="../../js/fancybox-2.1.5/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script lang="javascript">
        var J$ = jQuery.noConflict();
        function SelectAndClose() {
            txtValue = document.getElementById('<%= _browseTextBox.ClientID %>').value;
            window.returnValue = txtValue.value;

            var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
            // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
            var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
            var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
            // At least Safari 3+: "[object HTMLElementConstructor]"
            var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
            var isIE = /*@cc_on!@*/false || !!document.documentMode;   // At least IE6


            if (isIE == true) {
                //alert("iexcplorer");
                parent.J$.fancybox.close();
                //document.getElementById("closeFancyInternet").click();//For IExplorer
            }
            else {
                //alert("another one");
                document.getElementById("closeFancy").click(); //For Firefox
            }
            return false;
        }

        function closeBrowsing() {
            document.getElementById("closeFancy").click();
            window.close();
            return false;
        }


    </script>

ブラウザを確認するには、次のリンクを参照する必要があります。 http://jsfiddle.net/9zxvE/383/

0
Yemmill