Home arrow HTML arrow Opening Web Page Dialog Boxes with Other Dialog Boxes
HTML

Opening Web Page Dialog Boxes with Other Dialog Boxes


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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
January 12, 2009
TABLE OF CONTENTS:
  1. · Opening Web Page Dialog Boxes with Other Dialog Boxes
  2. · Content
  3. · Child HTML
  4. · Adding a Row in a Child Table

print this article
SEARCH DEVARTICLES

Opening Web Page Dialog Boxes with Other Dialog Boxes
(Page 1 of 4 )

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: &nbsp&nbsp&nbsp&nbsp&nbsp<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: &nbsp&nbsp&nbsp&nbsp&nbsp<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.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials