Home arrow HTML arrow Page 4 - Setting the Features of Web Page Dialog Boxes
HTML

Setting the Features of Web Page Dialog Boxes


In this second part of a five-part series on producing web page dialog boxes, you'll learn how to set the text in the status bar of a window, control the size and position of a dialog box, and more. We'll also touch on the content of the dialog box, and how to make it carry out specific tasks when it closes.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
January 05, 2009
TABLE OF CONTENTS:
  1. · Setting the Features of Web Page Dialog Boxes
  2. · Size and Position
  3. · Sending Content to the Dialog Box
  4. · Giving it Body Elements

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Setting the Features of Web Page Dialog Boxes - Giving it Body Elements
(Page 4 of 4 )

Here we shall give the dialog box two text input elements and a button. The method is simple. Simply add the corresponding tags to the string within the BODY tags. Including these in the above code, we have:


<script type="text/javascript">

function openWindow()

{

boxStr = "<html>"

+ "<head>"

+ "<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>";

 

myWindow = window.open("","","menubar=no,toolbar=no,width=400,height=400","");

myWindow.document.write(boxStr);

}

</script>


The “&nbsp” and the “<br />” elements are for formatting purposes only. This enables the controls to be better placed.

We are at the end of the dialog box basics. The last thing we need to talk about is the onunload event of the HTML BODY element for the dialog box.

Closing the Dialog Box

The “Done” button for any dialog box is clicked when you have finished using the box. Clicking this button should trigger the onunload event of the dialog box. Closing the dialog box by clicking the Close button should also trigger the onunload event.

When the onunload event is triggered, you can carry out any final task for the box. At this point, information may have to be sent to the database at the server, or to the main window, or some other dialog box that is still open. You write a function in JavaScript that carries out the final task. Your web page may look like this:


<html>


<head>

<title>New Page 1</title>

</head>

<script type="text/javascript">

function finalize()

{

//statement to finalize

// ---

//close the window

}

</script>


<body onunload="finalize()">


<button type="button" onclick = "finalize()">Done</button>


</body>


</html>


Do not forget to include a Close statement in the finalize() function. This is because you want the window to close when you click the Done button. We shall talk about the close statement later in the series.

We continue in the next part of the series.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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