Create a message box with link to webpage.

Divardo · 06-29-2009, 09:08 AM

I currently have an alert message box appearing which asked the user to visit a website to take a survey. What I would ideally like is a message box appearing which gives them two options in the form of buttons. Yes to take the survey now, which would link to the web page. The second button being cancel which would close the message box, which is normally done with the OK button now.

Any ideas how this can be done?

Thanks

udjamaflip · 06-29-2009, 10:37 AM

I would suggest using an window.open with this:

Code:

window.open ("http://www.javascript-coder.com","mywindow");

however I will warn you that people detest such invasive advertisements and I personally would never visit your site again let alone the site you are advertising if you shoved something like that in my face.

hope that helps!

rdspoons · 06-30-2009, 02:22 AM

In a lot of cases a custom div should do to emulate a modal box.
You can easily style the div (and buttons) to your needs.

The important part is to have the zIndex of the main message div
("survey in the example") higher than the other elements in the page.
Do not try to use this over a non-transparent flash element without an
iframe backing it.

Simple Example:

Code:

<html>
<head>
<title>
</title>
<style type='text/css'>
body {
     height:100%;
     margin:0;
     padding:0;
}
#survey {
     z-index: 9999;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     background:#000;
     display:none;
     position: absolute;	
     text-align:center;
}
#survey div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:3px double #999;
     padding:15px;
     text-align:center;
}
</style>
<script type="text/javascript">
var $=$||function(n){return document.getElementById(n);}
function survey() {
	var e = $("survey");
	e.style.display = (e.style.display == "block") ? "none" : "block";
}
</script>
</head>
<body>
<a href='#' onclick='survey()'>Great Oportunity</a>

<div id="survey">
     <div>
          <p>Do you want to visit a website to take a survey?</p>
		<button onclick="window.open('http://www.google.com');survey();">Open New Window</button><br />
		<button onclick="window.location='http://www.google.com';">Go There</button>
		<button onclick="survey()">Cancel</button>
     </div>
</div>
</body>
</html>