Afficher le formulaire modal avant que l’utilisateur ne quitte la page

L’événement de déchargement se déclenche lorsqu’un utilisateur tente de s’éloigner. Cependant, si vous utilisez une DIV comme une fenêtre contextuelle, le navigateur s’éloigne avant que l’utilisateur n’ait la possibilité de la lire.

Pour les conserver, vous devez utiliser une boîte de dialog alerte / invite / confirmation. (Pour autant que je sache)

La liaison à un fichier HTML a très bien fonctionné pour moi au lieu de décharger. La raison est bien expliquée dans une autre réponse ici.

 $("html").bind("mouseleave", function () { $('#emailSignupModal').modal(); \\or any modal $("html").unbind("mouseleave"); }); 

Si vous souhaitez afficher le modal une seule fois par jour ou lors de toute autre condition particulière, vous pouvez utiliser des cookies .

Une autre alternative que je vois dans les sites utilisés pour cette fonctionnalité est de créer une action lorsque l’utilisateur fait défiler la page, comme lorsqu’il fait défiler la page vers la barre d’adresse, comme le fait ce site http://www.diamondcandles.com/. l’élément de corps. Par exemple:

 $( document ).ready(function() { $("body").bind("mouseenter",function(){ /* optional */ }).bind("mouseleave",function(){ if(!$.cookie('promo_popup')) { /* do somthing (ex. init modal) */ /* set cookie so this does not repeat */ $.cookie('promo_popup', '1', { path: '/' }); } }); }); 

Y a-t-il un moyen de faire cela?

Nan.

Vous êtes coincé avec l’invite que le navigateur vous donne.

S’ils cliquent sur le bouton Précédent ou quelque chose de similaire, je pense que les cases alerte / invite / confirmation sont votre seule option.

Cependant, vous pouvez probablement écouter des événements de pression de touche spécifiques, tels que ctrl / cmd + w / r, et les interrompre avec une boîte de dialog.

jetez un oeil à ceci: http://rewdy.com/tools/leavenotice-jquery-plugin

De la source, vous devriez pouvoir pirater quelque chose ensemble. http://github.com/rewdy/leaveNotice/blob/master/uncompressed/jquery.leaveNotice.js

A lire également: Comment faire apparaître une fenêtre contextuelle lorsqu’un visiteur quitte un site Web

 var confirmOnPageExit = function (e) { // If we haven't been passed the event get the window.event e = e || window.event; var message = "Are you sure you want to navigate away from this page? All unsaved changes will be lost."; // For IE6-8 and Firefox prior to version 4 if (e) { e.returnValue = message; } // For Chrome, Safari, IE8+ and Opera 12+ return message; }; 

window.onbeforeunload = confirmOnPageExit;

Je viens de faire cela pour un projet.

J’ai mis rel="external" sur tous les liens externes puis utilisé JS / Jquery pour détecter si le lien possède cet atsortingbut et, le cas échéant, empêcher le comportement par défaut et déclencher un modal.

 $('a').on('click', function(e){ // Grab the url to pump into the modal 'continue' button. var thisHref = $(this).attr('href'); // Grab the attr so we can check if its external var attr = $(this).attr('rel'); // Check if link has rel="external" if (typeof attr !== typeof undefined && attr !== false) { // prevent link from actually working first. e.preventDefault(); // insert code for firing your modal here! // get the link and put it in your modal's 'continue button' $('.your-continue-button').attr('href', thisHref); } }); 

J’espère que cela t’aides.