javascript - example - fancybox youtube

jquery fancybox: evite cerrar al hacer clic fuera de fancybox

Question

Estoy usando el complemento de 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 obligar 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, debe comentar (o eliminar) la línea 341 en el método _finish:

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

Answer 2

Estoy usando fancybox 1.3.1, si quieres forzar al usuario a cerrar la caja modal SÓLO al hacer clic en el botón, puedes especificar en la configuración:

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

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

La solución $("#fancybox-overlay").unbind() dada para esta pregunta por @Gabriel funciona, excepto que tuve que vincularla a la fancybox después de cargar su contenido, y no pude desvincularme inmediatamente. Para cualquiera que se encuentre con este problema, el siguiente código me solucionó el problema:

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

La demora de 400 ms lo hizo funcionar para mí. Funcionó con 300ms pero no quería arriesgarme.

Answer 7

ninguno de los anteriores funcionó para mí, así que simplemente escribí un poco para la última versión 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

Si está utilizando Fancybox 1.2.6 (como si estuviera en un proyecto), descubrí la opción hideOnOverlayClick. Puede establecerlo en falso (p. Ej. HideOnOverlayClick: false).

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

Answer 9

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

Use esto para deshabilitarlo:

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

Use esto para volver a habilitarlo:

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

Answer 10

Simplemente agregue la 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 11

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

puede evitar que la caja elegante se cierre aplicando estas configuraciones

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

obtén la configuración de fancybox del siguiente enlace

http://www.fancybox.net/api

Answer 13

Para este problema, intente de esta manera

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

Espero que esto ayude.

Answer 14

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;

Answer 15

Establezca el parámetro closeClick en falso dentro de su función:

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

    return false;
});