Document for the Modeless Dialog Box

  

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>User Preferences</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// Close the dialog
function closeme() {
    window.close()
}
// Handle click of OK button
function handleOK() {
    var returnFunc = window.dialogArguments
    returnFunc(getFormData())
    closeme()
}
// Handle click of Apply button
function handleApply() {
    var returnFunc = window.dialogArguments
    returnFunc(getFormData())
}
// Handle click of Cancel button
function handleCancel() {
    window.returnValue = ""
    closeme()
}
// 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] = 
            form.elements[i].options[form.elements[i].selectedIndex].value
        } 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(currPrefs) {
    if (currPrefs) {
        var form = document.prefs
        if (currPrefs["name"]) {
            form.name.value = currPrefs["name"]
        }
        if (currPrefs["bgColor"]) {
            setSelected(form.bgColor, currPrefs["bgColor"])
        }
        if (currPrefs["textColor"]) {
            setSelected(form.textColor, currPrefs["textColor"])
        }
        if (currPrefs["h1Size"]) {
            setSelected(form.h1Size, currPrefs["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
            break
        }    
    }
    return
}
// 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) {
        handleOK()    
    }
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#eeeeee" onLoad="init()">
<H2>Web Site Preferences</H2>
<HR>
<TABLE BORDER=0 CELLSPACING=2>
<FORM NAME="prefs" onSubmit="return false">
<TR>
<TD>Enter your first name:<INPUT NAME="name" TYPE="text" VALUE="" SIZE=20 onKeyDown="checkEnter()">
</TR>
<TR>
<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
</SELECT>
</TR>
<TR>
<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
</SELECT>
</TR>
<TR>
<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
</SELECT>
</TR>
</TABLE>
</FORM>
<DIV STYLE="position:absolute; left:120px; top:220px">
<BUTTON STYLE="width:80px" onClick="handleOK()">OK</BUTTON>&nbsp;&nbsp;
<BUTTON STYLE="width:80px" onClick="handleCancel()">Cancel</BUTTON>&nbsp;&nbsp;
<BUTTON STYLE="width:80px" onClick="handleApply()">Apply</BUTTON>
</DIV>
</BODY>
</HTML>

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.	Use prompt for password checking
14.	User input
15.	Yes/No Confirmation
16.	Non string parameter for alert()
17.	Dialog Box Demo
18.	Alert Window
19.	Main Page for show Modeless Dialog
20.	Document for the Modal 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

Document for the Modeless Dialog Box : Dialog « Window Browser « JavaScript DHTML

Related examples in the same category