web-dev-qa-db-fra.com

Comment fermer une fancybox jQuery en cliquant sur un bouton

J'utilise fancy box pour créer une fenêtre contextuelle et y charger une autre page à l'aide d'un iframe. voici mon 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>

Il charge la page avec succès et fait les choses. Mais au lieu de fermer le formulaire popup, il charge le formulaire source popup à l'intérieur du popup lui-même. Je souhaite fermer le formulaire contextuel une fois le travail terminé et revenir à la page du menu principal à partir de laquelle le menu contextuel a été généré. Comment y parvenir en cliquant sur un bouton du formulaire contextuel.

Cordialement, Rangana

jqueryajaxcodeigniterfancybox
16
Rangana Sampath

appelez $.fancybox.close();

regardez aussi cette réponse dans le post

Selon http://fancybox.net/faq

  1. Comment puis-je fermer FancyBox à partir d'un autre élément? ?

Il suffit d'appeler $.fn.fancybox.close() sur votre événement onClick

Vous devriez donc pouvoir ajouter fn.

34
Haim Evgi

Je devais utiliser parent.jQuery.fancybox.close() avec mon Drupal site pour que cela fonctionne correctement.

14
Neil

Vous pouvez utiliser l'appel en ligne

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

Ou vous pouvez utiliser une fonction appelée

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

Fonction d'appel dans onClickevent

7
Alex

C'est un vieux fil mais je pensais partager mes deux sous. 

Je rencontrais des problèmes similaires lors de la fermeture de l'iframe fancybox à l'aide de l'événement onclick. Après plusieurs tentatives, le problème a été résolu: window.parent.jQuery.fancybox.close ()

Voici un exemple utilisant un bouton de saisie:

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

De plus, j'ai testé le onlick sur une étiquette anchor (a) et cela a bien fonctionné.

4
Jaz

$.fn.fancybox.close() ne fonctionne pas pour la version 2.x, en fait, cela génère une erreur. Si vous utilisez la version 2.x, essayez plutôt $.fancybox.close(true).

2
silvenon

En raison de mon bouton de fermeture a différentes fonctions: fermer popup, et fermer fancybox. Il doit utiliser e.stopPropagation () pour arrêter un événement bouillonnant; 

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

Solution SIMPLE, trouver le lien pour fermer (il a une classe fancybox-close) et le faire en 6 secondes (ou 6000 millisecondes)

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

Cela fonctionne pour moi ...

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

Si vous voulez vérifier votre navigateur doit voir ce lien: http://jsfiddle.net/9zxvE/383/

0
Yemmill