Wie man eine jQuery fancybox von Schaltfläche klicken schließen

Question

Ich benutze schicke Kiste ein Popup zu erstellen und eine andere Seite über einen iframe zu laden. Hier ist mein Code

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

Die Seite wird erfolgreich geladen und der Vorgang wird ausgeführt. Aber anstatt das Popup-Formular zu schließen, lädt es das Popup-Quellformular im Popup selbst. Ich möchte das Popup-Formular schließen, wenn die Arbeit erledigt ist, und zur Hauptmenüseite zurückkehren, von der aus das Popup generiert wurde. Wie erreiche ich dies, wenn ich auf eine Schaltfläche des Popup-Formulars klicke?

Mit freundlichen Grüßen, Rangana

Answer 1

Aufruf an $.fancybox.close();

Schauen Sie auch auf diese Antworten im Beitrag

Nach Angaben von http://fancybox.net/faq

4. Wie kann ich die FancyBox von einem anderen Element aus schließen? ?

Einfach anrufen $.fn.fancybox.close() auf Ihr onClick-Ereignis

Sie sollten also in der Lage sein, einfach die fn .

Answer 2

Ich musste die parent.jQuery.fancybox.close() mit meinem Drupal Website, damit dies richtig funktioniert.

Answer 3

Sie können den Inline-Aufruf

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

Oder Sie können die Funktion namens

<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" />

Funktion in onClickevent aufrufen

Answer 4

Dies ist ein altes Thema, aber ich dachte, ich würde meine Meinung dazu sagen.

Ich hatte ähnliche Probleme mit dem Schließen der fancybox iframe mit dem onclick-Ereignis und nach vielen Versuchen, dies tat den Trick für mich: window.parent.jQuery.fancybox.close()

Hier ist ein Beispiel mit einer Eingabetaste:

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

Außerdem habe ich den Onlick an einem Anker-Tag (a) getestet, und es hat gut funktioniert.

Answer 5

$.fn.fancybox.close() funktioniert bei Version 2.x nicht, sondern führt zu einer Fehlermeldung. Wenn Sie die Version 2.x verwenden, versuchen Sie $.fancybox.close(true) stattdessen.