Opening Web Page Dialog Boxes with Other Dialog Boxes
(Page 1 of 4 )
It is possible for one dialog box to open another dialog box. In this way, you can have a chain of boxes where the box that opens is the Parent box, and the one opened is the Child box. The main window is the first parent. In this article, the third one in a five-part series, you will learn how to do this and more.
Dialog Box Opening Another Dialog Box
To make this chain of boxes possible, the string that is the content of the child box should have the complete style and JavaScript code for the child box. For the purpose of maintenance, the string for each box should be an independent string in the code of the main window.
In the following code, you have a main window which opens a dialog box; the opened dialog box has a button that, when clicked, would open another dialog box.
<html>
<head>
<script type="text/javascript">
childBoxContent = "<script type="text/javascript">"
+ "function openAnotherBox()"
+ "{"
+ "boxStr2 = "<html>""
+ "+"<head>""
+ "+"<title>""
+ "+"Second Dialog Box""
+ "+"</title>""
+ "+"<style type="text/css">""
+ "+"body {background-color:silver}""
+ "+"</style>""
+ "+"</head>""
+ "+"<body>""
+ "+"First Input:      <input type="text"> <br />""
+ "+"Second Input: <input type="text"> <br /> <br />""
+ "+"<button type="button">Done</button>""
+ "+"</body>""
+"+"</html>";"
+ "myWindow2 = window.open("","","menubar=no,toolbar=no,width=400,height=400","");"
+ "myWindow2.document.write(boxStr2);"
+ "}"
+ "</script>";
function openWindow()
{
boxStr1 = "<html>"
+ "<head>"
+ "<title>"
+ "First Dialog Box"
+ "</title>"
+ "<style type="text/css">"
+ "body {background-color:silver}"
+ "</style>"
+ childBoxContent
+ "</head>"
+ "<body>"
+ "First Input:      <input type="text"> <br />"
+ "Second Input: <input type="text"> <br /> <br />"
+ "<button type="button" onclick="openAnotherBox()">Open Another Box</button> <br /> <br />"
+ "<button type="button">Done</button>"
+ "</body>"
+"</html>";
myWindow1 = window.open("","","menubar=no,toolbar=no,width=400,height=400","");
myWindow1.document.write(boxStr1);
}
</script>
</head>
<body>
<button type="button" onclick="openWindow()">Click to Open Dialog Box</button>
</body>
</html>
Note the extra escaping and the plus signs of the string for the second dialog box. This is because we are dealing with a string of strings. The string is not meant for the dialog box to be opened; it is meant for the dialog box (second) that will be opened by the opened (first) dialog box.
A point to note here is the use of the semi-colon at the end of a JavaScript statement that will be in the new window. In the main window, the new window’s content is in a string. The code, as I have given it above, will be in one long line, without the carriage return and new line characters to separate the statements. So if two statements are joined together, they will not be interpreted as such. You need the semi-colon to separate them.
This approach of creating dialog boxes using strings of strings can be tedious. I will show you an easier way, later in the series.
Next: Content >>
More HTML Articles
More By Chrysanthus Forcha
