jquery fancybox - evitar cerrar al hacer clic fuera de fancybox

Question

Estoy usando el complemento Fancybox para mis ventanas modales. Parece que no importa qué opciones utilizo, no puedo evitar que la ventana modal de fancybox se cierre cuando el usuario hace clic fuera de la ventana modal de fancybox (área atenuada).

¿Hay alguna manera de forzar al usuario a hacer clic en la X o en un botón que active el evento de cierre? Parece que debería ser simple, así que espero que esté leyendo los ejemplos incorrectamente.

He intentado hideOnContentClick: false pero eso no parece funcionar para mí. ¿Algunas ideas?

Answer 1

No hay otra opción para eso. Tendrás que cambiar el código fuente.

En jquery.fancybox-1.2.1.js que necesitará comentar (o eliminar) la línea 341 en el método _finish:

//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close); 

Answer 2

Sólo añadir siguiente línea a su función, no tiene que cambiar nada en jquery.fancybox-1.2.6.js

callbackOnStart : function() {$("#fancy_overlay").bind("click","null");}, 

Answer 3

estoy usando FancyBox 1.3.1, si quieres forzar al usuario a cerrar el cuadro de modal con solo hacer clic en el botón, se puede especificar en la configuración:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#your_link").fancybox({ 
     'hideOnOverlayClick':false, 
     'hideOnContentClick':false 
    }); 
    }); 
</script> 

Answer 4

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#your_link").fancybox({ 
     'hideOnOverlayClick':false, 
     'hideOnContentClick':false 
    }); 
    }); 
</script>        

Answer 5

Me encontré con el mismo "problema". Esto funcionó para mí:

$("#fancybox-overlay").unbind(); 

Answer 6

jQuery(".lightbox").fancybox({ 
     helpers  : { 
      overlay : { 
       speedIn : 0, 
       speedOut : 300, 
       opacity : 0.8, 
       css  : { 
        cursor : 'default' 
       }, 
       closeClick: false 
      } 
     }, 
    }); 

Answer 7

ninguna de las anteriores trabajó para mí, por lo que acabo de escribir un poco simple para la versión más reciente de FancyBox.

function load(parameters) { 
    $('.fancybox-outer').after('<a href="javascript:;" onclick="javascript:{parent.$.fancybox.close();}" class="fancybox-item fancybox-close" title="Close"></a>'); 
} 

$(document).ready(function() { 
    $(".various").fancybox({ 
     modal: true, 
     afterLoad: load 
    }); 
}); 

Espero que esto ayude :)

Answer 8

La solución $("#fancybox-overlay").unbind() dado para esta pregunta @Gabriel funciona, excepto que necesitaba para obligar a éste a la FancyBox después de que carga su contenido, y no podía desvincular inmediatamente. Para cualquier persona que se encuentra con este problema, el siguiente código resuelve el problema para mí:

$('.fancybox').fancybox({'afterLoad' : function() { 
    setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);} 
}); 

El retardo de 400 ms tengo trabajo para mí. Funcionó con 300ms pero no quería arriesgarme.

Answer 9

Si está utilizando Fancybox 1.2.6 (como si estuviera en un proyecto), descubrí la opción hideOnOverlayClick. Puede configurarlo en falso (por ejemplo, hideOnOverlayClick: falso).

Encontré esta opción mientras exploraba para modificar el código según la sugerencia dada por Scott Dowding.

Answer 10

Tuve que usar una combinación de todas las respuestas anteriores, ya que todas incluyen errores. Ciertamente, no es necesario editar el código fuente.

En mi caso, quería desactivar los clics superpuestos cerrando el cuadro ya que tenía una progresión de preguntas que se mostrarían secuencialmente dentro de la caja de fantasía, así que no quería que los usuarios perdieran su progreso al hacer clic accidentalmente en la superposición , pero quería mantener esa funcionalidad en otro lugar de la página.

Utilice esta opción para deshabilitarlo:

$(".fancybox-overlay").unbind(); 

Utilice esta opción para volver a habilitarla:

$(".fancybox-overlay").bind("click", $.fancybox.close); 

Answer 11

sólo tiene que utilizar el siguiente código:

$(document).ready(function() { 
    $("a#Mypopup").fancybox({ 
     "hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox 
     "hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox 
     "enableEscapeButton" : false // prevents closing pressing ESCAPE key 
    }); 
    $("a#Mypopup").trigger('click'); 
}); 

<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a> 

Answer 12

establecer el parámetro closeClick a false dentro de su función:

$(".video").click(function() { 
    $.fancybox({ 
     width: 640, 
     height: 385, 
     helpers: { 
      overlay: { 
       closeClick: false 
      } 
     } 
    }); 

    return false; 
}); 

Answer 13

se puede evitar que la caja de lujo para cerrar mediante la aplicación de estos ajustes

'showCloseButton'=>false, // hide close button from fancybox 
'hideOnOverlayClick'=>false, // outside of fancybox click disabled 
'enableEscapeButton'=>false, // disable close on escape key press 

obtener la configuración del siguiente enlace

http://www.fancybox.net/api

Answer 14

Para esta edición el FancyBox, por favor trate de esta manera

$("YourElement").fancybox({ 
helpers: { 
     overlay: { closeClick: false } //Disable click outside event 
    } 

Espero que esto ayude.

Answer 15

Puede establecer el valor predeterminado closeClick en la superposición en falso. Me ha funcionado en la versión 2.1.5.

$.fancybox.helpers.overlay.defaults.closeClick=false;