change javascript messagebox icon

greedyisg00d

Hi is it possible to change the javascript messagebox exclamation icon to information icon or any other? Sample codes is much appreciated. Thanks

NogDog

To the best of my knowledge, that is browser-dependent and not modifiable.

Depending on your exact functional needs, there may be ways to emulate it, possibly even using DOM/CSS JavaScript methods.

Salkcin

Well, you could build your own custom messagebox and style in any way you want 🙂

Here's a small sample I made to show how it could be done, ex:

<html>

<head>
<script type="text/javascript">

function ShowAlert()
{
	document.getElementById('alert').style.display = 'block';
	document.getElementById('mask').style.display = 'block';
}

function HideAlert()
{
	document.getElementById('alert').style.display = 'none';
	document.getElementById('mask').style.display = 'none';
}

</script>


<style type="text/css">
#mask
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #000000;
	filter: alpha(opacity=20);
	opacity: .20;
        display: none;
}

#alert
{
	position: absolute;
	top: 40%;
	left: 40%;
	width: 300px;
	height: 150px;
	border: 1px solid #000000;
	background: #6D7B8D;
	display: none;
}

</style>
</head>


<body>

<!-- div that mask the whole page with a dark transparant layer 
to highlight the messagebox and to "deactivate" the page --> 
<div id="mask"></div>

<!-- div containing the custom messagebox -->
<div id="alert">
Custom messagebox!<br />
Design it as you want it ;)
<p><a href="javascript:HideAlert()">Click to close!</a></p>
</div>


your site goes here...<br />
<a href="javascript:ShowAlert()">Trigger the custom messagebox</a>

</body>
</html>

now, just style the messagebox with your own graphics, button(s), background, font, colors etc 😉