• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 650
  • Last Modified:

JavaScript Only for : Exit PopUp, AlertBox, Redirected Page

Hi,
I've been searching through the net and also looking for previous posting questions here but I dont receive an answer like what I want.

On page #1 I want a "javaScript" which will pop an "Alert Box" if visitor close the window.
This "Alert Box" should have options for "OK" and "Cancel".
When this PopUp shown, the main window (page #1) is redirected to another URL (page #2).
If visitor click "Cancel" then he will stay on page #2.
But if he clicks "OK" then he will be redirected to page #3.

I've been searching and find out that this whole functions are happens with combinations of "FrameSet" and "JavaScript".

But I wonder if an expert can help me written the codes for "JavaScript" only (cos I dont like "FrameSet" on my site).

Will this possible ?

By the way, for clear example, please open this site and close it so you'll see the effect that I'm looking for:
http://www.seminarstrategysecrets.com/
0
egolddude
Asked:
egolddude
  • 3
  • 3
1 Solution
 
Dennis MaederCommented:
The essence of the page you quote is below.
It does not redirect to a new page. It is stay or close.
It is bad netiquette to drive someone to a page they have not requested.
D

<html>
<head>
<script type='text/javascript'>
function ExitPop() {
 return "my message to you\n\n***************** "
}
</script>
</head>

<body onBeforeUnload="return ExitPop();">
content
</body>
</html>
0
 
Dennis MaederCommented:
egolddude,
I should add. Both 'pages' are divisions in the same page.
The technique is to toggle the visibility of the alternate divisions in the ExitPop function.
i.e.
<div id='MainDiv' style='display:block;'>
  main content
<div>
<div id='ExitDiv' style='display:none;'>
  exit content
<div>

and include these lines in the function before the  return
  MainDiv.style.display='none';
  ExitDiv.style.display='block';

D
0
 
egolddudeAuthor Commented:
Thanks, man ...
Your given code really helps me in giving a direction on how the Alert Box should loooks like.

About the redirected page ... actually the page is inside my site too.
So, the 1st page shown an offer and the redirected page is also showing the same offer (only with a little different layout and more words to read).

Can't I do that?  Well, at least I give an offer to the visitors to stay on the current page (the redirected page, so they can read more about the offer if they want to) OR just leave by pressing OK.

Anybody have more solutions?  Perhaps developed from the JavaScript above?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
egolddudeAuthor Commented:
Thanks, Dennis ... You're genius ... :) ... Exactly what I've been looking for.

Well ... though you just forgot to close the DIV Tags ... :)) ...
Which at first causing the EXIT CONTENT not displayed at all ...

After all ... The POINT is yours.

Thanks.
0
 
egolddudeAuthor Commented:
Mmmmmm ... could you add one more function bro?

I just checked that if I REFRESH the page, the Alert Box show up and the 'ExitDiv' loads.
But when I click OK, it redirected me to the 'MainDiv'

Do you have a solution for this?

So, either REFRESH or CLOSE should have the SAME FUNCTION.

Go ... Go ... GO ... Expert ... :)
0
 
Dennis MaederCommented:
This should do it, and easy on the superlatives old chap :)

<html>
<head>
<script type='text/javascript'>
//play with popstop state to change behavior
var popstop = true;
function ExitPop() {
 if (popstop == true) {
    popstop = false;
    MainDiv.style.display='none';
    ExitDiv.style.display='block';  return "my message to you\n\n***************** "
  }
}
</script>
</head>

<body onBeforeUnload="return ExitPop();">
<div id='MainDiv' style='display:block;'>
  main content (optional:- program event to set popstop=false - play with popstop state to change behavior)
</div>
<div id='ExitDiv' style='display:none;'>
  exit content
</div>

</body>
</html>
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now