Display modal form before user leaves page
I've used window.onbeforeunload to display a custom message when a user attempts to leave a site.
Example:
window.onbeforeunload = function(){
if(some_condition){
return "Are you sure you want to navigate away from this page?\nAll unsaved changes will be lost.";
}
};
+--------------------------------------------------------+
| Are you sure you want to navigate away from this page? |
| All unsaved changes will be lost. |
| 开发者_StackOverflow社区 |
| [ Yes ] [ Cancel ] |
+--------------------------------------------------------+
However, I'd like to enhance this a bit. If possible, I'd like to use a custom modal form instead of the generic popup.
Is there a way to do this?
Binding to a html has worked very well for me instead of unload. The reason is well explained in another answer here.
$("html").bind("mouseleave", function () {
$('#emailSignupModal').modal(); \\or any modal
$("html").unbind("mouseleave");
});
If you want to show the modal only once in a day or on any other particular condition match then you can use cookies.
The unload event will fire when a user tries to navigate away. However, if you use a DIV as a pop-up the browser will navigate away before the user has a chance to read it.
To keep them there you'd have to use a alert/prompt/confirm dialog boxes. (as far as I know)
Is there a way to do this?
Nope.
You are stuck with the prompt the browser gives you.
another alternative I see sites use for this functionality is creating an action when the user scrolls off the page like when they scroll to the address bar like this site does http://www.diamondcandles.com/ this can be done using mouseleave event on the body element. For example:
$( 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: '/' });
}
});
});
If they click the back button or something similar, I believe the alert/prompt/confirm boxes are your only option.
However, you can probably listen for specific keypress events, like ctrl/cmd + w/r, and interrupt those with a dialog.
Hey this will help you to show a popup model or window when a user leaving your website. Before using this code please try Run code snippet
<!DOCTYPE html>
<html lang="en">
<head>
<title>show popup when user leaves website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Show popup when user leaves your website</h2>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Hey! wait for free __________</h4>
</div>
<div class="modal-body">
<p>Get this code for free</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("html").bind("mouseleave", function () {
$('#myModal').modal();
$("html").unbind("mouseleave");
});
});
</script>
</body>
</html>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;
I've just had to do this for a project.
I set rel="external" on all external links then used JS/Jquery to detect if the link has this attribute, and if it does - prevent the default behavior and instead fire a 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);
}
});
Hope this helps.
加载中,请稍侯......
精彩评论