Create a Custom Alert Box in Javascript using ShowModalDialog

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

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 and if you don’t want to return any value 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>

Click here to see the demo

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.