Custom Alert Boxes

Create your own alert boxes and replace the "Microsoft Internet Explorer" header with your own site name.
Although it takes more coding than the default alert boxes you can customise the colours, fonts, add images, script effects, etc.

Alert Box || Confirm Box

To hide and show the alert box the following script is used: 

<script type="text/javascript">

function showHide(layerid){
if (document.getElementById(layerid).style.visibility != "hidden"){
document.getElementById(layerid).style.visibility = "hidden"
}
else{
document.getElementById(layerid).style.visibility = "visible"
}
}

</script>

To create the Alert box use the following:

<a href="#null" onclick="showHide('box1')"><b>Alert Box</a></b>

<DIV id="box1" style="position:absolute;left:50;top:150;width:250;height:100px;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">Your Site Name</div>

<div style="color:black;height:50px">Your Message</div>

<button style="width:74;height:20;font-size:10;border:1px outset #ffffff;" onclick="showHide('box1')">OK</button>
</DIV>

To create the Confirm Alert box use the following:

<a href="#null" onclick="showHide('box2')"><b>Confirm Alert</b></a>

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

<div>Your Site Name</div>
<div style="color:black;height:50px">Are You Sure You Really Want To?</div>

<button style="width:74;height:20;font-size:10;border:1px outset #ffffff;" onclick="yourfunction();showHide('box2')">Yes</button>
<button style="width:74;height:20;font-size:10;border:1px outset #ffffff;" onclick="showHide('box2')">No</button>
</DIV>

Note:
Remember to include your action to the onclick event either directly or via javascript function