PDA

Click to See Complete Forum and Search --> : Fancy alert box javascript

matthewhse
08-04-2003, 09:40 AM
Hi,

I want to create a fancy kind of javascript alert box. Here's what I want it to do:

First, it should be visible only to NN4.x users. Figured I'd use document.layers to accomplish that.

Second, I want the box to have two buttons. One should say "More Info" and the other should say "Continue."

"More Info" should close the alert box and launch a page of my choice in a new browser window. "Continue" should simply close the alert box.

A special feature I'd really like would be to have the alert box use a cookie to only come up once per browser session.

If anyone can point me toward something like this, I'd be very appreciative. I don't know much about javascript, so any instructions will have to be pretty plain for me to understand!

Thanks,

Matthew
Mr J
08-05-2003, 05:06 PM
See if the following puts you an the right track

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<SCRIPT language="JavaScript">
<!--
function showHide(layerid){
if (document.getElementById(layerid).style.visibility != "hidden"){
document.getElementById(layerid).style.visibility = "hidden";
}
else{
document.getElementById(layerid).style.visibility = "visible";
}
}


function test(){
window.open("yourpage.htm")
}
// -->
</SCRIPT>

</HEAD>
<BODY>
<P align="center"><a class=lined href="#null" onclick="showHide('box2')"><b>Confirm Alert</b></a>

<DIV id="box2" style="position:absolute;left:350;top:150; width:250;color:#FFFFFF;border-top:2px solid #ffffff; border-left:2px solid #ffffff; border-right:2px solid #808080; border-bottom:2px solid #808080; background:#d8cfc8;visibility:hidden;text-align:center">

<div style="height:18;font-size:12;text-align:left;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FF005500', EndColorStr='#FF00ff00')">Your Site Name</div>

<P><center><font color="black" size=2>Are You Sure You Really Want To?</font></center>

<form>
<span style="position:relative;left:0;top:0;width:75;height:22;border:1 groove #000000">
<input type=button value="More Info" style="width:74;height:20;font-size:10;border:1px outset #ffffff;" onclick="test();showHide('box2')" >
</span>
<span style="position:relative;left:10;top:0;width:75;height:22;border:1 groove #000000">
<input type=button value="Cancel" style="width:74;height:20;font-size:10;border:1px outset #ffffff;" onclick="showHide('box2')">
</span>
</form>
</DIV>


</BODY>
</HTML>