Document for the Modal Dialog : Dialog « Window Browser « JavaScript DHTML

Document for the Modal Dialog


JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001

<TITLE>User Preferences</TITLE>
// Close the dialog
function closeme() {
// Handle click of OK button
function handleOK() {
    window.returnValue = getFormData()
// Handle click of Cancel button
function handleCancel() {
    window.returnValue = ""
// Generic function converts form element name-value pairs
// into an array
function getFormData() {
    var form = document.prefs
    var returnedData = new Array()
    // Harvest values for each type of form element
    for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].type == "text") {
            returnedData[form.elements[i].name] = form.elements[i].value
        } else if (form.elements[i].type.indexOf("select") != -1) {
            returnedData[form.elements[i].name] = 
        } else if (form.elements[i].type == "radio") {
            returnedData[form.elements[i].name] = form.elements[i].value
        } else if (form.elements[i].type == "checkbox") {
            returnedData[form.elements[i].name] = form.elements[i].value
        } else continue
    return returnedData
// Initialize by setting form elements from passed data
function init() {
    if (window.dialogArguments) {
        var args = window.dialogArguments
        var form = document.prefs
        if (args["name"]) {
   = args["name"]
        if (args["bgColor"]) {
            setSelected(form.bgColor, args["bgColor"])
        if (args["textColor"]) {
            setSelected(form.textColor, args["textColor"])
        if (args["h1Size"]) {
            setSelected(form.h1Size, args["h1Size"])
// Utility function to set a SELECT element to one value
function setSelected(select, value) {
    for (var i = 0; i < select.options.length; i++) {
        if (select.options[i].value == value) {
            select.selectedIndex = i
// Utility function to accept a press of the
// Enter key in the text field as a click of OK

function checkEnter() {
    if (window.event.keyCode == 13) {
<BODY BGCOLOR="#eeeeee" onLoad="init()">
<H2>Web Site Preferences</H2>
<FORM NAME="prefs" onSubmit="return false">
<TD>Enter your first name:<INPUT NAME="name" TYPE="text" VALUE="" SIZE=20
<TD>Select a background color:
<SELECT NAME="bgColor">
    <OPTION VALUE="beige">Beige
    <OPTION VALUE="antiquewhite">Antique White
    <OPTION VALUE="goldenrod">Goldenrod
    <OPTION VALUE="lime">Lime
    <OPTION VALUE="powderblue">Powder Blue
    <OPTION VALUE="slategray">Slate Gray
<TD>Select a text color:
<SELECT NAME="textColor">
    <OPTION VALUE="black">Black
    <OPTION VALUE="white">White
    <OPTION VALUE="navy">Navy Blue
    <OPTION VALUE="darkorange">Dark Orange
    <OPTION VALUE="seagreen">Sea Green
    <OPTION VALUE="teal">Teal
<TD>Select "Welcome" heading font point size:
<SELECT NAME="h1Size">
    <OPTION VALUE="12">12
    <OPTION VALUE="14">14
    <OPTION VALUE="18">18
    <OPTION VALUE="24">24
    <OPTION VALUE="32">32
    <OPTION VALUE="48">48
<DIV STYLE="position:absolute; left:200px; top:220px">
<BUTTON STYLE="width:80px" onClick="handleOK()">OK</BUTTON>&nbsp;&nbsp;
<BUTTON STYLE="width:80px" onClick="handleCancel()">Cancel</BUTTON>

Related examples in the same category

1.Displays and monitors the most used dialog boxes
2.Dialog in JavaScript
3.Open a dialog window
4. String Object's Length, Document.Location Properties, confirm and input dialog
5. Working with the Alert, Confirm, and Prompt Methods
6.Alert box (dialog) with line-breaks
7.Button click to display dialog
8.Pop-up Window - centred
9.Display a confirm box (dialog)
10.Display a prompt box (dialog)
11.Confirm Dialog Box
12.The Prompt Dialog Box: check the return result
13.Document for the Modeless Dialog Box
14.Use prompt for password checking
15.User input
16.Yes/No Confirmation
17.Non string parameter for alert()
18.Dialog Box Demo
19.Alert Window
20.Main Page for show Modeless Dialog
21.Main Page for show Modal Dialog
22.Create a pop-up
23.Alert Dialog
24.What is the output of a confirm dialog
25.If OK button was clicked
26.Use if-else with confirm dialog
27.Prompt Input Dialog
28.Pass string parameter to alert dialog box
29.Pass integer value to alert dialog box
30.Assign returning value from prompt dialog box to your variable
31.A carriage return in alert dialog box
32.Escape string in alert dialog box
33.Tab key in the alert dialog box
34.New line character in alert box