Create a Custom Alert Box in Javascript using ShowModalDialog

submit to reddit

This tutorial is about creating a Custom Alert Box in JavaScript. This tutorial will explain how to create a custom alert box in JavaScript using showModalDialog()/Open() function.

js_alertbox

Difference between ShowModalDialog() and window.open() Method:
Return type of Window.open() method is an Object, where as Window.showModalDialog() method return type is a value. If you want to get values in return from your alert box use ShowModalDialog() method otherwise we can use window.open() method.

Please Refer to the code and Demo below.

Sample CODE :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1] <strong>SampleAlertBox.html :-</strong>

<html>
<title>Custom alert</title>
<script>
function hello(mymsg){

myArray = new Array(mymsg);
mywd=400;
myht=150;
myleft=(document.body.clientWidth - mywd)/2;
mytop=(document.body.clientHeight - myht)/2;

myOpt='scrollbar=no;toolbars=no;menubar=no;location=no;location:no;dialogTop:'+mytop+'px;dialogLeft:'+myleft+'px;dialogWidth:'+mywd+'px;dialogHeight:'+myht+'px;center:no;help:no;resizable:no;status:no';

var myObj = new Object();
myObj.mess = mymsg;
retVal = window.showModalDialog("customalert.html",myObj,myOpt);
document.getElementById("mytext").value = retVal;
}

</script>
<body>
<center>
<br/>
<input id ="mytext" type="text" value="Return Value from Show Dialog">
<br/><br/>
<input type ="button" value="Click Here" onclick="hello('This is a Sample Test Msg');"/>
</center>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2] <strong>customalert.html :-</strong>

<html>
<head>
<title>Custom Alert in javascript</title>
<script>

function createalert(){

var obj = window.dialogArguments;
mymessage = obj.mess;
document.write("<div style='margin:0px auto;'>");
document.write("<div style='float:left;margin:0px auto;width:60px;padding:10px;'>");
document.write("<img src='icon.png'>");
document.write("</div><div style='margin:0px auto;padding-top:5px;padding-left:80px;padding-right:5px;'>");
document.write("<p>"+mymessage+"</p>");
document.write("</div></div>");
document.write("<div>");
document.write("<p><input style='float:right;width:85px;height:27px;' type='button' value='OK' onClick='window.returnValue=true;window.close();'><input style='float:right;width:85px;height:27px;' type='button' value='CANCEL' onClick='window.returnValue = false;window.close();'></p>");
document.write("</div>");
}

</script>
</head>
<body onload="createalert()"></body>
</html>

If you don’t want to return a value from your alert box (like we did in the above example) use window.open() method instead of window.showModalDialog() method.