Popup box on page exit - javascript

What I am trying to do is make a pop-up box any time a page exits or is navigated away from. Right now I have
<script type="text/javascript">
function box()
{
var r=confirm("Message");
if (r==true)
{
window.location.href="yes.html";
}
else
{
window.location.href="no.html";
}
}
</script>
<body onunload="box();">
I have 2 problems with this:
It only shows the box if you actually navigate away from the page, refresh, new url etc. If you exit the tab or browser, the box doesnt pop up.
No matter what button you press, it just sends you where you tried to go originally, it never sends you to no.html or yes.html.
Could someone tell me how this is possible?

Try this:
<script type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
setTimeout(function() {
setTimeout(function() {
window.location.href="yes.html";
}, 1000);
},1);
return "Message";
}
</script>
You can only catch the stay on the page option, you cannot override a user leaving the page. similar to: Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?

Related

Jquery redirect is not working from pop up

I have a webpage which is supposed to redirect to another page after a user clicks on a button named "I Want It" with class ".et_bloom_submit_subscription". This button is part of a mailchimp form.
This button appears as part of a form on the sidebar, footer and on two different kinds of pop ups. The form also asks for name and email of the visitor.
This is the code that i used -
<script type="text/javascript">
(function($) {
function setup_onclick_redirect() {
$('.et_bloom_submit_subscription').on("click", function() {
setTimeout(function() {
if ($('.et_bloom h2.et_bloom_success_message.et_bloom_animate_message').css('display') == 'block') {
$(location).attr('href', 'http://startupstrong.com/webinar-on-building-brand-with-social-media/');
}
}, 4000);
});
}
$(window).load(function() {
setTimeout(function() {
setup_onclick_redirect();
}, 700);
});
})(jQuery);
The above code successfully redirects a visitor after he gives his name and email on the form present in sidebar and footer.
But it fails to redirect when user enter details on the pop up screen.
It should work on the popup too, I am not sure what is happening :(
This is the link where problem appears - http://startupstrong.com/purple-cow-by-seth-godin-take-all-my-detailed-notes/
Note that, if you want to see the pop up multiple times just clear the cache and refresh the page. Then go to the end of the page, it should reappear. Please let me know if there is some problem.

Jquery Show Popup only when window is closed

I am trying to display a confirmation message when the user closes the browser/tab and not when any of the links on page is clicked.
I have got the first part of displaying the message on window close working nicely but problem is that the message/alert is displayed also when user clicks on any link on the page.
I have got code from somewhere to prevent this behavior but still when ever any link is clicked the alert pops up.
Here is the code:
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/backfix-min.js"></script>
$(document).ready(function() {
$(window).bind('beforeunload', function(e){
$("#lead-gen-modal").dialog("open");
// This line only appears in alert boxes for IE
return "Wait\! Don\'t Go\! We have a special offer for you\. Stay on this page to receive big savings\!";
});
$("a").click(function() {
window.onbeforeunload=null;
});
});
just use a global variable
and set it to false when clicking a link.
var key = true;
$(window).bind('beforeunload', function(e){
if(key)
$("#lead-gen-modal").dialog("open");
});
update :
$(document).on("click","a",function() {
key=false;
});
or if you just want to prevent closing window you can do this :
window.onbeforeunload = function(e){
if(key)
return false;
}
I think you are looking for something like this.
$(window).unload(function() {
alert("bye");
});
If that does not work on Chrome try this
$(window).on('beforeunload', function() {
return "bye";
});
jQuery API: unload() http://api.jquery.com/unload/

Jquery Exit Popup Confusion

I have the following code
<script type="text/javascript">
function PopIt() { return 'Are you sure you want to leave?'; }
function UnPopIt() { /* nothing to return */ }
$(document).ready(function() {
window.onbeforeunload = PopIt;
$('a').click(function(){ window.onbeforeunload = UnPopIt; });
});
</script>
This script works. But how do I alter it so it works like this;
1) User presses exit tab/page
2) page changes to one of my choice
3) exit popup displays with yes or no to leave
4) yes = close page, no = stay on current page
I'd like the page to change before the popup displays
Thanks.
Note: I do have control over the pages, I wish to redirect to another .php in the same folder.
Try using both onbeforeunload and onunload together like this...
function PopIt() {
return 'Are you sure you want to leave?';
}
function UnloadIt() {
window.opener.nowDoThisOpener("pass this variable along too");
}
$(document).ready(function() {
//set the function defining what should be done BEFORE unloading
window.onbeforeunload = PopIt;
//set the function defining what should be done ON unloading
window.onunload = UnloadIt;
//set all links to disable both of these on click
$('a').click(function(){
window.onbeforeunload = null;
window.onunload=null;
});
});
Note that nowDoThisOpener is a function that you can define (And obviously call whatever you want) on the parent page. And, like I've suggested, you can pass along information too.
Also, in your example you were setting an empty function UnPopIt to cancel the onbeforeunload. That's unnecessary, you can just set the onbeforeunload to null, as well as the onunload, as I've done in my example.
Previous Answer:
Could you put some kind of flag in the hash when you redirect? So instead of sending off to http://www.pageofmy.com/choice.php you sent to http://www.pageofmy.com/choice.php#1
Then on choice.php you could have...
<script>
if (location.hash=="#1") {
//show alert
}
</script>
This assumes that you have control over pageofmy.com/choice.php. If you're redirecting to some other site you don't have control over, I don't see how you can do this besides attempting to have a popup window come up (which will most likely be blocked by modern browsers)

jQuery Exit Popup Redirect?

So I've been looking around for hours, testing multiple versions, testing some of my own theories and I just can't seem to get it working.
What I'm trying to do is use alert or confirm (or whatever works) so popup a dialog when a user tries to navigate away from a purchase form. I just want to ask them "Hey, instead of leaving, why not get a free consultation?" and redirect the user to the "Free Consultation" form.
This is what I have so far and I'm just not getting the right results.
$(window).bind('beforeunload', function(){
var pop = confirm('Are you sure you want to leave? Why not get a FREE consultation?');
if (pop) {
window.location.href('http://www.mydomain/free-consultation/');
} else {
// bye bye
}
});
$("form").submit(function() {
$(window).unbind("beforeunload");
});
This is showing confirm dialog to user, want to stay or leave page. Not exactly what you looking for but maybe it will be useful for start.
function setDirtyFlag() {
needToConfirm = true; //Call this function if some changes is made to the web page and requires an alert
// Of-course you could call this is Keypress event of a text box or so...
}
function releaseDirtyFlag() {
needToConfirm = false; //Call this function if dosent requires an alert.
//this could be called when save button is clicked
}
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
Script taken from http://forums.devarticles.com/showpost.php?p=156884&postcount=18
Instead of using the beforeunload and alert(), I decided to check whether or not the users mouse has left the document. See code below:
$(document).bind('mouseleave', function(event) {
// show an unobtrusive modal
});
Not sure whether it will help.
You need to stop the propagation before showing the Confirm / Alert.
Please refer http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/
Look at the last comment.
Try this:
window.onunload = redirurl;
function redirurl() {
alert('Check this Page');
window.location.href('http://www.google.com');
}

Controlling the Back button using onhashchange or jquery

I need some guidance on how to have very basic control in the use of the back button.
Basically, I need to warn the user that by clicking the back button, when on my checkout.asp page, they will lose the items already there. I need to instruct them to use the navigation buttons instead.
I've had a look around a have seen mention of the onhashchange event but I could not get it to work.
I also tried the plugin by Ben Alman:
<script type="text/javascript" src="jquery/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery.ba-hashchange.js"></script>
<script language="JavaScript" type="text/JavaScript">
$(function(){
// Bind the event.
$(window).hashchange( function(){
// Alerts every time the hash changes!
alert( location.hash );
})
// Trigger the event (useful on page load).
$(window).hashchange();
});
</script>
This only fires up the alert (with no value from the location.hash) when entering the page but I simply want to warn the user if they're leaving. If they choose to stay then let them press cancel to leave them on the same page.
Any help appreciated.
Use:
window.onbeforeunload = function() {
return confirm("you have unsaved data. ok to exit?")
})
In order to only show a warning when the back button is used, we have to eliminate the alert message when a valid source is clicked.
var showWarning = true;
window.onbeforeunload = function() {
if (showWarning) {
return confirm("you have unsaved data. ok to exit?");
}
}
function clearWarning() {
showWarning = false;
}
Now just make sure to call the clearWarning() function when an allowed button is clicked. Something like this should work:
referenceToElement.addEventListener('onClick', clearWarning(), false);
I have not tested this, but I would imagine that something like this is what you need.

Categories