javascript - transparente - jQuery antes de descargar una ventana emergente personalizada para salir de una página

ventana modal jquery ejemplo

Question

Hola, me gustaría personalizar mi ventana emergente para dejar una página, ¿hay alguna forma sencilla de hacerlo?

Estoy usando jQuery simple

$(document).ready(function() {
    var myPopUp = $(''#pop-up'').css(''display'', ''block'');
    $(window).bind(''beforeunload'', function(){
      return ''load my pop up here instead of the default browser message'';
    });
});

Mi HTML para la ventana emergente está oculto por defecto

<div id="pop-up">
  <h2>Are you sure wanna leave</h2>
  <a href="#">Leave</a>
  <a href="#" class="close">Stay</a>
</div>

Gracias

Answer 1

Esta pregunta se ha formulado y respondido en varias publicaciones de como esta.

Si también puede explicar cuáles son las circunstancias de abandonar la "página", probablemente podría obtener una respuesta mejor y más adecuada. Si desea advertir que el usuario debe guardar antes de eso, verifique la publicación superior del enlace. Si solo desea advertir antes de abandonar la página, intente con esta respuesta que dejó el usuario Hunter :

<script type=''text/javascript''>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = ''You sure you want to leave?''; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>

Answer 2

Respuesta corta: No puedes .

Respuesta más larga: por razones obvias de "seguridad", es muy limitado lo que puede hacer cuando un usuario intenta alejarse de una página / cerrar una pestaña o de alguna otra manera abandonar el sitio. La razón es que los navegadores desean asegurarse completamente de que no puede evitar que el usuario realmente cierre una ventana que desea cerrar. Por lo tanto, el evento jQuery de beforeunload y el evento javascript de onbeforeunload son extremadamente limitados en lo que pueden hacer, y una de las cosas que definitivamente no pueden hacer es evitar que la página se cierre, excepto por el uso de un método muy estandarizado y aburrido que el navegador permite. Algunos navegadores le permiten especificar un mensaje, mientras que otros (incluido Firefox) ni siquiera le permiten cambiar el mensaje (porque puede engañar al usuario preguntándole "¿Puedo adoptar a su hijo por nacer?") ... AFAIK, que la mayoría de los navegadores permiten debe especificar una cadena de su elección además de un mensaje estándar que no se puede cambiar. Algunos navegadores (sin los navegadores de escritorio principales) incluso carecen del evento por completo.

Lo que quieres lograr es básicamente forzar al usuario a permanecer en tu página, y luego mostrar una buena ventana emergente pidiéndole que confirme ... pero aunque esto definitivamente podría mejorar la experiencia del usuario en muchos casos, no tienes pensar muy lejos para imaginar cómo podría abusarse de él simplemente para no permitir que el usuario se vaya nunca.

Piensa en qué tan molestos son los sitios que rompen el botón de retroceso, ¡imagina que podrían incluso eliminar tu capacidad de cerrar una pestaña!

Me encontré con this pregunta bastante entretenida del foro de un usuario que ha pasado una gran cantidad de tiempo tratando de prevenir incluso la pequeña molestia que se puede agregar, un breve extracto:

No me gusta la descarga y la descarga. No creo que NUNCA deban dispararse en mi instalación de firefox. No creo que haya una aplicación útil de estos eventos, ni siquiera el benévolo "¡tienes trabajo no guardado!" ventanas emergentes Cuando le digo a mi navegador web que cierre una página web, no quiero que una página web evite (o retrase) que el navegador la cierre, en absoluto.

Y solo para agregar un poco de información algo oficial:

mozilla.org: WindowEventHandlers.onbeforeunload :

Desde el 25 de mayo de 2011, la especificación HTML5 indica que las llamadas a los métodos window.alert (), window.confirm () y window.prompt () pueden ignorarse durante este evento. Vea la especificación HTML5 para más detalles.

Increíblemente, al parecer no puedo encontrar fuentes semioficiales que describan las preocupaciones de seguridad o las limitaciones específicas de estos eventos en este momento, aunque estoy seguro de que las he visto antes ... Si alguien puede, siéntase libre de agregarlas y eliminarlas. ¡este párrafo!