Cómo cerrar una caja de lujo jQuery desde el botón, haga clic en

Question

Estoy usando fancy box para crear una ventana emergente y cargar otra página con un iframe. aquí está mi código

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

Carga la página con éxito y hace las cosas. Pero en lugar de cerrar el formulario emergente, carga el formulario fuente emergente dentro de la ventana emergente. Quiero cerrar el formulario emergente cuando el trabajo esté terminado y volver a la página del menú principal desde donde se generó el mensaje emergente. ¿Cómo logro esto al hacer clic en un botón del formulario emergente?

Saludos, Rangana

Answer 1

llamada a $.fancybox.close();

también mirar a esta respuesta en el post

Según http://fancybox.net/faq

4. ¿Cómo puede Cerré FancyBox de otro elemento? ?

Sólo tiene que llamar $.fn.fancybox.close() en su evento de clic

Así que sólo debe ser capaz de añadir en el fn.

Answer 2

Puede utilizar la llamada línea

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

O bien puede utilizar la función llamada función

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

llamada en OnClickEvent

Answer 3

$.fn.fancybox.close() no funciona para la versión 2.x, de hecho, genera un error. Si está utilizando la versión 2.x, intente con $.fancybox.close(true).

Answer 4

Tuve que usar parent.jQuery.fancybox.close() con mi sitio Drupal para que esto funcione correctamente.

Answer 5

Debido a que mi botón de cerrar tiene diferentes funciones: cierre la ventana emergente y cierre la fancybox. Necesita usar e.stopPropagation() para detener el evento de burbujeo;

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

Answer 6

Esto funciona para mí ...

<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 desea comprobar su navegador debe ver este enlace: http://jsfiddle.net/9zxvE/383/

Answer 7

solución simple, encontrará un enlace a cerrar (que tiene un fancibox-cerca de clase) y hacerlo en 6 segundos (o 6000 milisegundos)

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

Answer 8

uso botón de cierre caso de FancyBox:

document.getElementsByClassName("fancybox-item fancybox-close")[0].click(); 

Answer 9

Este es un hilo viejo, pero pensé que compartiría mis dos centavos.

que estaba teniendo problemas similares con el cierre del marco flotante FancyBox utilizando el evento onclick y después de muchos intentos, esto hizo el truco para mí: window.parent.jQuery.fancybox.close()

Aquí hay un ejemplo usando una botón de entrada:

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

Además, probé el onlick en una etiqueta de anclaje (a) y funcionó bien.