Home arrow HTML arrow Producing Web Page Dialog Boxes

Producing Web Page Dialog Boxes

These days, many web-based applications are trying to look more like desktop applications. To a limited extent, it works -- until you come to dialog boxes. A desktop application's dialog box works one way, and the dialog boxes you can get from an opened web page work another way; they do not provide the same functions. Fortunately, there's a way to change this. This first part of a five-part article series gets you on your way.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 12
December 29, 2008
  1. · Producing Web Page Dialog Boxes
  2. · The Main Method to Use
  3. · The Basic Dialog Box
  4. · Removing or Allowing the Bars

print this article

Producing Web Page Dialog Boxes
(Page 1 of 4 )


If you open an application like Microsoft Word, you will see the main window. This main window has the menu bar, the tool bar and the formatting bar. The document window is the window that receives what you type. Microsoft Word opens with a maximized document window.

An opened web page looks like an opened Microsoft Word window. It has a menu bar and a tool bar; it also has an address bar and a links bar. The rest of the web page has content similar to the content you see in Microsoft Word's document window.

With Microsoft Word, if you want the Font dialog box, you can get it by clicking a menu item in the menu bar, and in the pull down menu, you click "Font." There are many other dialog boxes you can obtain in Microsoft Word. These dialog boxes enable you to produce documents with the particular features of your choice.

Custom software applications can produce many dialog boxes, which enable you to work with the application. Each of these dialog boxes has controls. One dialog box can even produce another dialog box. The dialog boxes can send data to the database.

With a web page, you can still obtain dialog boxes through the menu bar. However, these dialog boxes do things like saving the web page or customizing the toolbar. The browser window cannot give you a dialog box that will change some value in the web page.

Today we have web pages that send data to databases. It is true that web pages offer forms. However, if you want more flexibility, you need dialog boxes.

Before you continue reading this article, you should have basic knowledge of software programming, HTML, JavaScript, CSS and HTML DOM.

Limitations of the Solution offered by the DOM

You would typically want a dialog box with at least the following features:

  • A title bar.

  • A size that suits the user.

  • A background color.

  • A status bar.

  • Form controls.

  • The ability to produce another dialog box.

  • The ability to send data to its parent dialog box or child dialog box (that it produced).

  • The ability to send data to a new (child) dialog box through the function that opens the new dialog box.

  • The ability to return data to the parent dialog box when done (closed).

The HTML DOM offers three dialog boxes: alert (message), confirm and prompt. The alert dialog box opens with a message and has one OK button. You read the message and click the OK button; that is all it does.

The confirm dialog box produces a message with an OK or Cancel button. You read the message; if you like it, you click the OK button; if you do not like it, you click the Cancel button. If you click the OK button it returns true to the software; if you click the Cancel button, it returns false. That is all you get from the confirm box.

The prompt box opens with one Input Text Control. It can receive and return only one value. That is all you get from it.

As you can see, we need to learn how to produce our own dialog boxes in order to meet some of the challenges of web development.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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