JavaScript DHTML/Window Browser/Dialog

Материал из Web эксперт
Версия от 07:28, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

A carriage return in alert dialog box

  
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
alert("A carriage return lies right\rin the middle of this line!");
</script>
</head>
<body>
</body>
</html>



Alert box (dialog) with line-breaks

  
<html>
<head>
<script type="text/javascript">
function disp_alert(){
    alert("Line 1" + "\n" + "Line 2")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Display alert box">
</form>
</body>
</html>



Alert Dialog

  
 
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!-- 
window.alert("navigator.appName: "+navigator.appName);
var hasJava= navigator.javaEnabled()
if (hasJava==true)
 window.alert("You have Java enabled.");
else
 window.alert("No Java?");
window.alert("You are using "+navigator.platform);
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>



Alert Window

  
<HTML>
<body>
<FORM>
<INPUT TYPE="button" VALUE="Click Me" onClick="window.alert ("Ouch!")">
</FORM>
</body>
</HTML>



Assign returning value from prompt dialog box to your variable

  
<html>
<head>
<title>A Simple Page</title>
<script language="javascript">
<!--
yourname = prompt("What is your name?","Type your name here ...");
alert(yourname);
-->
</script>
</head>
<body>
</body>
</html>



Button click to display dialog

  
/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
*/
<form>
<input type="button"
       value="Click here" 
       onclick="alert("You clicked the button");">
</form>



Confirm Dialog Box

  
<HTML>
<HEAD>
<TITLE>confirm dialog</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function clearTable() {
    if (confirm("Are you sure you want to empty the table?")) {
        alert("Emptying the table...")
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="clear" VALUE="Reset Table" onClick="clearTable()">
</FORM>
</BODY>
</HTML>



Create a pop-up

  
<html>
<head>
<script type="text/javascript">
function show_popup(){
    var p=window.createPopup()
    var pbody=p.document.body
    
    pbody.style.backgroundColor="lime"
    pbody.style.border="solid black 1px"
    pbody.innerHTML="Click outside to close."
    p.show(150,150,200,50,document.body)
}
</script>
</head>
<body>
<button onclick="show_popup()">Show pop-up</button>
</body>
</html>



Dialog Box Demo

  
<HTML>
<HEAD>
<TITLE>Dialog box demo</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Alert"
 ONCLICK="alert("An alert dialog box.")">
<INPUT TYPE="BUTTON" VALUE="Confirm"
 ONCLICK="confirm("A confirm dialog box.")">
<INPUT TYPE="BUTTON" VALUE="Prompt"
 ONCLICK="prompt("A prompt dialog box.","Type something!")">
</FORM>
</BODY>
</HTML>



Dialog in JavaScript

  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Main Application Page</title>
<style rel="stylesheet" id="mainStyle" type="text/css">
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
    margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}
</style>
<script type="text/javascript">
/* ***********************************************************
Example 4-3 (DHTMLAPI.js)
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O"Reilly & Associates  ISBN 1-56592-494-0
http://www.oreilly.ru
Copyright 2002 Danny Goodman.  All Rights Reserved.
************************************************************ */
// DHTMLapi.js custom API for cross-platform
// object positioning by Danny Goodman (http://www.dannyg.ru).
// Release 2.0. Supports NN4, IE, and W3C DOMs.
// Global variables
var isCSS, isW3C, isIE4, isNN4, isIE6CSS;
// Initialize upon load to let all browsers establish content objects
function initDHTMLAPI() {
    if (document.images) {
        isCSS = (document.body && document.body.style) ? true : false;
        isW3C = (isCSS && document.getElementById) ? true : false;
        isIE4 = (isCSS && document.all) ? true : false;
        isNN4 = (document.layers) ? true : false;
        isIE6CSS = (document.rupatMode && document.rupatMode.indexOf("CSS1") >= 0) ? true : false;
    }
}
// Set event handler to initialize API
window.onload = initDHTMLAPI;
// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
    var theObj;
    for (var i = 0; i < doc.layers.length; i++) {
        if (doc.layers[i].name == name) {
            theObj = doc.layers[i];
            break;
        }
        // dive into nested layers if necessary
        if (doc.layers[i].document.layers.length > 0) {
            theObj = seekLayer(document.layers[i].document, name);
        }
    }
    return theObj;
}
// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
    var theObj;
    if (typeof obj == "string") {
        if (isW3C) {
            theObj = document.getElementById(obj);
        } else if (isIE4) {
            theObj = document.all(obj);
        } else if (isNN4) {
            theObj = seekLayer(document, obj);
        }
    } else {
        // pass through object reference
        theObj = obj;
    }
    return theObj;
}
// Convert object name string or object reference
// into a valid style (or NN4 layer) reference
function getObject(obj) {
    var theObj = getRawObject(obj);
    if (theObj && isCSS) {
        theObj = theObj.style;
    }
    return theObj;
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
    var theObj = getObject(obj);
    if (theObj) {
        if (isCSS) {
            // equalize incorrect numeric value type
            var units = (typeof theObj.left == "string") ? "px" : 0 
            theObj.left = x + units;
            theObj.top = y + units;
        } else if (isNN4) {
            theObj.moveTo(x,y)
        }
    }
}
// Move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
    var theObj = getObject(obj);
    if (theObj) {
        if (isCSS) {
            // equalize incorrect numeric value type
            var units = (typeof theObj.left == "string") ? "px" : 0 
            theObj.left = getObjectLeft(obj) + deltaX + units;
            theObj.top = getObjectTop(obj) + deltaY + units;
        } else if (isNN4) {
            theObj.moveBy(deltaX, deltaY);
        }
    }
}
// Set the z-order of an object
function setZIndex(obj, zOrder) {
    var theObj = getObject(obj);
    if (theObj) {
        theObj.zIndex = zOrder;
    }
}
// Set the background color of an object
function setBGColor(obj, color) {
    var theObj = getObject(obj);
    if (theObj) {
        if (isNN4) {
            theObj.bgColor = color;
        } else if (isCSS) {
            theObj.backgroundColor = color;
        }
    }
}
// Set the visibility of an object to visible
function show(obj) {
    var theObj = getObject(obj);
    if (theObj) {
        theObj.visibility = "visible";
    }
}
// Set the visibility of an object to hidden
function hide(obj) {
    var theObj = getObject(obj);
    if (theObj) {
        theObj.visibility = "hidden";
    }
}
// Retrieve the x coordinate of a positionable object
function getObjectLeft(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (document.defaultView) {
        var style = document.defaultView;
        var cssDecl = style.getComputedStyle(elem, "");
        result = cssDecl.getPropertyValue("left");
    } else if (elem.currentStyle) {
        result = elem.currentStyle.left;
    } else if (elem.style) {
        result = elem.style.left;
    } else if (isNN4) {
        result = elem.left;
    }
    return parseInt(result);
}
// Retrieve the y coordinate of a positionable object
function getObjectTop(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (document.defaultView) {
        var style = document.defaultView;
        var cssDecl = style.getComputedStyle(elem, "");
        result = cssDecl.getPropertyValue("top");
    } else if (elem.currentStyle) {
        result = elem.currentStyle.top;
    } else if (elem.style) {
        result = elem.style.top;
    } else if (isNN4) {
        result = elem.top;
    }
    return parseInt(result);
}
// Retrieve the rendered width of an element
function getObjectWidth(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (elem.offsetWidth) {
        result = elem.offsetWidth;
    } else if (elem.clip && elem.clip.width) {
        result = elem.clip.width;
    } else if (elem.style && elem.style.pixelWidth) {
        result = elem.style.pixelWidth;
    }
    return parseInt(result);
}
// Retrieve the rendered height of an element
function getObjectHeight(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (elem.offsetHeight) {
        result = elem.offsetHeight;
    } else if (elem.clip && elem.clip.height) {
        result = elem.clip.height;
    } else if (elem.style && elem.style.pixelHeight) {
        result = elem.style.pixelHeight;
    }
    return parseInt(result);
}
// Return the available content width space in browser window
function getInsideWindowWidth() {
    if (window.innerWidth) {
        return window.innerWidth;
    } else if (isIE6CSS) {
        // measure the html element"s clientWidth
        return document.body.parentElement.clientWidth
    } else if (document.body && document.body.clientWidth) {
        return document.body.clientWidth;
    }
    return 0;
}
// Return the available content height space in browser window
function getInsideWindowHeight() {
    if (window.innerHeight) {
        return window.innerHeight;
    } else if (isIE6CSS) {
        // measure the html element"s clientHeight
        return document.body.parentElement.clientHeight
    } else if (document.body && document.body.clientHeight) {
        return document.body.clientHeight;
    }
    return 0;
}

</script>
<script type="text/javascript">
// Help choose from four UI pseudo-window flavors
function getCurrOSUI() {
    var ua = navigator.userAgent;
    if (ua.indexOf("Mac") != -1) {
        if (ua.indexOf("OS X") != -1 || ua.indexOf("MSIE 5.2") != -1) {
            return "macosX";
        } else {
            return "macos9";
        }
    } else if (ua.indexOf("Windows XP") != -1 || ua.indexOf("NT 5.1") != -1) {
        return "winxp";
    } else if ((document.rupatMode && document.rupatMode != "BackComp") || 
        (navigator.product && navigator.product == "Gecko")) {
        // Win9x and CSS-compatible
        return "win9x";
    } else {
        // default for Windows 9x in quirks mode, Unix/Linux, & unknowns
        return "win9xQ";
    }
}
var currOS = getCurrOSUI();
// Load OS-specific style sheet for pseudo dialog layer
document.write("<link rel="stylesheet" type="text/css" href="dialogLayer_" + currOS + ".css">");
//******************************
//  BEGIN LAYER DIALOG CODE
//******************************/
// One object tracks the current pseudo-window layer.
var dialogLayer = {layer:null, visible:false};
// Center a positionable element whose name is passed as 
// a parameter in the current window/frame, and show it
function centerOnWindow(elemID) {
    // "obj" is the positionable object
    var obj = getRawObject(elemID);
    // window scroll factors
    var scrollX = 0, scrollY = 0;
    if (document.body && typeof document.body.scrollTop != "undefined") {
        scrollX += document.body.scrollLeft;
        scrollY += document.body.scrollTop;
        if (document.body.parentNode && 
            typeof document.body.parentNode.scrollTop != "undefined") {
            scrollX += document.body.parentNode.scrollLeft;
            scrollY += document.body.parentNode.scrollTop
        }
    } else if (typeof window.pageXOffset != "undefined") {
        scrollX += window.pageXOffset;
        scrollY += window.pageYOffset;
    }
    var x = Math.round((getInsideWindowWidth()/2) - 
        (getObjectWidth(obj)/2)) + scrollX;
    var y = Math.round((getInsideWindowHeight()/2) - 
        (getObjectHeight(obj)/2)) + scrollY;
    shiftTo(obj, x, y);
}
function initLayerDialog() {
    document.getElementById("closebox").src = "closeBox_" + currOS + ".jpg";
    dialogLayer.layer = document.getElementById("pseudoWindow");
}
// Set up and display pseudo-window.
// Parameters:
//    url -- URL of the page/frameset to be loaded into iframe
//    returnFunc -- reference to the function (on this page)
//                  that is to act on the data returned from the dialog
//    args -- [optional] any data you need to pass to the dialog
function openLayerDialog(url, title, returnFunc, args) {
    if (!dialogLayer.visible) {
        // Initialize properties of the modal dialog object.
        dialogLayer.url = url;
        dialogLayer.title = title;
        dialogLayer.returnFunc = returnFunc;
        dialogLayer.args = args;
        dialogLayer.returnedValue = "";
        
        // Load URL
        document.getElementById("contentFrame").src = url;
        
        // Set title of "window"
        document.getElementById("barTitle").firstChild.nodeValue = title;
        
        // Center "window" in browser window or frame
        dialogLayer.layer.style.visibility = "hidden";
        dialogLayer.layer.style.display = "block"
        centerOnWindow("pseudoWindow");
        
        // Show it and set visibility flag
        dialogLayer.layer.style.visibility = "visible"
        dialogLayer.visible = true;
     }
}
function closeLayerDialog() {
    dialogLayer.layer.style.display = "none"
    dialogLayer.visible = false;
}
//**************************
//  END LAYER DIALOG CODE
//**************************/
</script>
<script type="text/javascript">
// Global holds reference to selected element
var selectedObj;
// Globals hold location of click relative to element
var offsetX, offsetY;
// Set global reference to element being engaged and dragged
function setSelectedElem(evt) {
    var target = (evt.target) ? evt.target : evt.srcElement;
    var divID = (target.id == "titlebar") ? "pseudoWindow" : "";
    if (divID) {
        if (document.layers) {
            selectedObj = document.layers[divID];
        } else if (document.all) {
            selectedObj = document.all(divID);
        } else if (document.getElementById) {
            selectedObj = document.getElementById(divID);
        }
        setZIndex(selectedObj, 100);
        return;
    }
    selectedObj = null;
    return;
}
// Turn selected element on
function engage(evt) {
    evt = (evt) ? evt : event;
    setSelectedElem(evt);
    if (selectedObj) {
        if (document.body && document.body.setCapture) {
            // engage event capture in IE/Win
            document.body.setCapture();
        }
        if (evt.pageX) {
            offsetX = evt.pageX - ((typeof selectedObj.offsetLeft != "undefined") ? 
                      selectedObj.offsetLeft : selectedObj.left);
            offsetY = evt.pageY - ((selectedObj.offsetTop) ? 
                      selectedObj.offsetTop : selectedObj.top);
        } else if (typeof evt.clientX != "undefined") {
            offsetX = evt.clientX - ((selectedObj.offsetLeft) ? 
                      selectedObj.offsetLeft : 0);
            offsetY = evt.clientY - ((selectedObj.offsetTop) ? 
                      selectedObj.offsetTop : 0);
        } else if (evt.offsetX || evt/offsetY) {
            offsetX = evt.offsetX - ((evt.offsetX < -2) ? 
                      0 : document.body.scrollLeft);
            offsetX -= (document.body.parentElement && 
                     document.body.parentElement.scrollLeft) ? 
                     document.body.parentElement.scrollLeft : 0
            offsetY = evt.offsetY - ((evt.offsetY < -2) ? 
                      0 : document.body.scrollTop);
            offsetY -= (document.body.parentElement && 
                     document.body.parentElement.scrollTop) ? 
                     document.body.parentElement.scrollTop : 0
        }
        evt.cancelBubble = true;
        return false;
    }
}
// Drag an element
function dragIt(evt) {
    evt = (evt) ? evt : event;
    if (selectedObj) {
        if (evt.pageX) {
            shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY));
        } else if (evt.clientX || evt.clientY) {
            shiftTo(selectedObj, (evt.clientX - offsetX), (evt.clientY - offsetY));
        }
        evt.cancelBubble = true;
        return false;
    }
}
// Turn selected element off
function release(evt) {
    if (selectedObj) {
        setZIndex(selectedObj, 0);
        if (document.body && document.body.releaseCapture) {
            // stop event capture in IE/Win
            document.body.releaseCapture();
        }
        selectedObj = null;
    }
}
function blockEvents(evt) {
    evt = (evt) ? evt : event;
    evt.cancelBubble = true;
    return false;
}
// Assign event handlers used by both Navigator and IE
function initDrag() {
    if (document.layers) {
        // turn on event capture for these events in NN4 event model
        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
        return;
    } else if (document.body & document.body.addEventListener) {
        // turn on event capture for these events in W3C DOM event model
      document.addEventListener("mousedown", engage, true);
      document.addEventListener("mousemove", dragIt, true);
      document.addEventListener("mouseup", release, true);
      return;
    }
    document.onmousedown = engage;
     document.onmousemove = dragIt;
     document.onmouseup = release;
    return;
}
</script>
<script type="text/javascript">
// Function to run upon closing the dialog with "OK".
function setPrefs() {
    // We"re just displaying the returned value in a text box.
    document.returned.searchURL.value = dialogLayer.returnedValue;
}
// Called by "Apply Settings" button to reload the page with
// search string data appended to URL.
function applySettings() {
    if (document.returned.searchURL.value) {
        location.href += document.returned.searchURL.value;
    }
}
//*****************************************
//      BEGIN CUSTOM PAGE STYLE CODE
//******************************************/
// Convert location.search into an array of values
// indexed by name.
function getSearchAsArray() {
    var results = new Array()
    var input = unescape(location.search.substr(1))
    if (input) {
        var srchArray = input.split("&")
        var tempArray = new Array()
        for (i = 0; i < srchArray.length; i++) {
            tempArray = srchArray[i].split("=")
            results[tempArray[0]] = tempArray[1]
        }
    }
    return results
}
var srchData = getSearchAsArray()
// Write style sheets with data passed in with location.search,
// or use default values if no data has been passed.
document.write("<style type="text/css">")
document.write("body {font-family:"Comic Sans MS",Helvetica,sans-serif; background-color:" +
   ((srchData["bgColor"]) ? srchData["bgColor"] : "#eeeeee") + "; color:" + 
   ((srchData["textColor"]) ? srchData["textColor"] : "#000000") + "}")
document.write("h1 {text-align:right; font-size:" + 
   ((srchData["h1Size"]) ? srchData["h1Size"] : "24") + "pt}")
document.write("</style>")
//*****************************************
//      END CUSTOM PAGE STYLE CODE
//******************************************/

</script>
</head>
<body onload="initDHTMLAPI(); initDrag(); initLayerDialog()">
<h1>Giantco, Inc.</h1>
<a href="#" onmouseover="status="Set preferences...";return true"
            onmouseout="status="";return true"
            onclick="openLayerDialog("dialog_main.html", "User Preferences", setPrefs, null);return false">
Preferences
</a> (click here to open layer-based "dialog" window)
<hr />
<h2>Welcome,
<script language="JavaScript" type="text/javascript">
document.write(" " + ((srchData.name) ? srchData.name : "friend"))
</script>
!</h2>
<form name="returned">
Value returned from dialog window:
<input type="text" name="searchURL" size="60" /><br />
<input type="button" name="apply" value="Apply Settings" onclick="applySettings()">
<div id="pseudoWindow">
<div id="titlebar" class="draggable"><img id="closebox" 
src="closeBox_win9x.jpg" onclick="closeLayerDialog()" />
<span id="barTitle">Titlebar</span></div>
<iframe id="contentFrame" src="" frameborder="0" vspace="0" hspace="0" 
marginwidth="14" marginHeight="14" width="100%" height="480" scrolling="auto">
</iframe>
</div>
</body>
</html>



Display a confirm box (dialog)

  
<html>
<head>
<script type="text/javascript">
function disp_confirm(){
    var name=confirm("Press a button")
    if (name==true){
        document.write("OK!")
    }else{
        document.write("Cancel!")
    }
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_confirm()" value="Display a confirm box">
</form>
</body>
</html>



Display a prompt box (dialog)

  
<html>
<head>
<script type="text/javascript">
function disp_prompt(){
    var name=prompt("Name","")
    if (name!=null && name!=""){
        document.write(name)
    }
}
</script>
</head>
<body>
    <form>
        <input type="button" onclick="disp_prompt()" value="Display a prompt box">
    </form>
</body>
</html>



Displays and monitors the most used dialog boxes

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>JsLib 1.3 - Exemple - dialogues.js</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <META NAME="Author" CONTENT="Etienne CHEVILLARD">
    <!-- dialogues.js -->
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
/* dialogues.js
 * Role : affiche et controle les boites de dialogue les plus utilisees
 * Projet : JsLib
 * Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
 * Version : 1.3
 * Creation : 12/07/2001
 * Mise a jour : 23/02/2005
 * Bogues connues : - le dialogue d"impression n"apparait pas sous Opera 5
 */
// --- Fonctions ---
// affiche une boite de dialogue de confirmation et retourne la reponse choisie
function dialogueConfirm(message) {
  if (!message) { message="Confirmation"; }
  return (window.confirm(message));
} // fin dialogueConfirm(message)
// affiche la boite de dialogue d"impression de la page Web courante
function dialogueImprimer() {
  if (window.print) {
    if (window.focus) self.focus();
    self.print();
  } else {
    var dagt=navigator.userAgent.toLowerCase();
    if ((dagt.indexOf("msie")!=-1) && (dagt.indexOf("opera")==-1)) {
      var dimp="<OBJECT ID="WindowPrint" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>";
      document.body.insertAdjacentHTML("beforeEnd", dimp);
      WindowPrint.ExecWB(6, 2);
    }
  }
  return true;
} // fin dialogueImprimer
// affiche une boite de dialogue d"information
function dialogueInfo(message) {
  if (!message) { message="Information"; }
  window.alert(message);
  return true;
} // fin dialogueInfo(message)
// affiche une boite de dialogue de saisie et retourne le texte saisi
function dialogueSaisie(message, defaut) {
  var drep;
  if (!message) { message="Saisie"; }
  if (!defaut) { defaut=""; }
  drep=window.prompt(message, defaut);
  if (!drep) { drep=""; }
  return (drep);
} // fin dialogueSaisie(message, defaut)
    
    </SCRIPT>
  </HEAD>
  <BODY>
    <H1>JsLib 1.3</H1>
    <HR>
    <H2>Exemple - dialogues.js</H2>
    <NOSCRIPT>
      <P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configur&eacute; pour ne
      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>
      <HR>
    </NOSCRIPT>
    <FORM ACTION="GET" NAME="f1" onSubmit="return false">
    
      <P>Bo&icirc;te de dialogue de saisie :<BR>
        <INPUT TYPE=BUTTON VALUE="Saisie du pr&eacute;nom" onClick="this.form.t1.value = dialogueSaisie("Indiquez votre pr&eacute;nom :", "Toto")">
      <P>Bo&icirc;te de dialogue d"information :<BR>
        Votre pr&eacute;nom : <INPUT TYPE=TEXT NAME="t1" VALUE="Toto">
        <INPUT TYPE=BUTTON VALUE=" OK " onClick="dialogueInfo("Bonjour " + this.form.t1.value + " !")">
      <P>Bo&icirc;te de dialogue de confirmation :<BR>
        <INPUT TYPE=BUTTON VALUE="Page pr&eacute;c&eacute;dente" onClick="if (dialogueConfirm("Voulez-vous revenir &agrave; la page pr&eacute;c&eacute;dente ?")) history.back()">
      <P>Bo&icirc;te de dialogue d"impression :<BR>
        <INPUT TYPE=BUTTON VALUE="Imprimer la page" onClick="dialogueImprimer()">
    </FORM>
    
  </BODY>
</HTML>



Document for the Modal Dialog

  

/*
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() {
    window.returnValue = getFormData()
    closeme()
}
// 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() {
    if (window.dialogArguments) {
        var args = window.dialogArguments
        var form = document.prefs
        if (args["name"]) {
            form.name.value = 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
            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:200px; top:220px">
<BUTTON STYLE="width:80px" onClick="handleOK()">OK</BUTTON>&nbsp;&nbsp;
<BUTTON STYLE="width:80px" onClick="handleCancel()">Cancel</BUTTON>
</DIV>
</BODY>
</HTML>



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>



Escape string in alert dialog box

  
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
alert("\"It wasn\"t like that!\" she said.");
</script>
</head>
<body>
</body>
</html>



If OK button was clicked

  
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
var response = confirm("Click OK or Cancel.");
if ( response == true )
{
   alert("A fine choice!")
}
</script>
</head>
<body>
</body>
</html>



Main Page for show Modal Dialog

  
<HTML>
<HEAD>
<TITLE>window.setModalDialog() Method</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var currPrefs = new Array()
function getPrefsData() {
    var prefs = showModalDialog("http://www.wbex.ru", currPrefs,
        "dialogWidth:400px; dialogHeight:300px")
    if (prefs) {
        if (prefs["name"]) {
            document.all.firstName.innerText = prefs["name"]
            currPrefs["name"] = prefs["name"]
        }
        if (prefs["bgColor"]) {
            document.body.style.backgroundColor = prefs["bgColor"]
            currPrefs["bgColor"] = prefs["bgColor"]
        }
        if (prefs["textColor"]) {
            document.body.style.color = prefs["textColor"]
            currPrefs["textColor"] = prefs["textColor"]
        }
        if (prefs["h1Size"]) {
            document.all.welcomeHeader.style.fontSize = prefs["h1Size"]
            currPrefs["h1Size"] = prefs["h1Size"]
        }
    }
}
function init() {
    document.all.firstName.innerText = "friend"
}
</SCRIPT>
</HEAD>
<BODYonLoad="init()">
<H1>window.setModalDialog() Method</H1>
<HR>
<H2 ID="welcomeHeader">Welcome, <SPAN ID="firstName">&nbsp;</SPAN>!</H2>
<HR>
<P>Use this button to set style preferences for this page:
<BUTTON ID="prefsButton" onClick="getPrefsData()">
Preferences
</BUTTON>
</BODY>
</HTML>



Main Page for show Modeless Dialog

  
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>window.setModelessDialog() Method</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var currPrefs = new Array()
var prefsDlog
function getPrefsData() {
    if (!prefsDlog || prefsDlog.closed) {
        prefsDlog = showModelessDialog("lst16-42.htm", setPrefs,
        "dialogWidth:400px; dialogHeight:300px")
        prefsDlog.init(currPrefs)
    }
}
function setPrefs(prefs) {
    if (prefs["bgColor"]) {
        document.body.style.backgroundColor = prefs["bgColor"]
        currPrefs["bgColor"] = prefs["bgColor"]
    }
    if (prefs["textColor"]) {
        document.body.style.color = prefs["textColor"]
        currPrefs["textColor"] = prefs["textColor"]
    }
    if (prefs["h1Size"]) {
        document.all.welcomeHeader.style.fontSize = prefs["h1Size"]
        currPrefs["h1Size"] = prefs["h1Size"]
    }
    if (prefs["name"]) {
        document.all.firstName.innerText = prefs["name"]
        currPrefs["name"] = prefs["name"]
    }
}
function init() {
    document.all.firstName.innerText = "friend"
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#eeeeee" STYLE="margin:20px" onLoad="init()">
<H1>window.setModelessDialog() Method</H1>
<HR>
<H2 ID="welcomeHeader">Welcome, <SPAN ID="firstName">&nbsp;</SPAN>!</H2>
<HR>
<P>Use this button to set style preferences for this page:
<BUTTON ID="prefsButton" onClick="getPrefsData()">
Preferences
</BUTTON>
</BODY>
</HTML>



New line character in alert box

  
<html>
  <head>
    <title>Including a special character in a string</title>
    <script type="text/javascript">
        var a = "First line.\nSecond line.";
        
        alert("String with a newline special character: " + a);    
    </script>
  </head>
  <body>
  </body>
</html>



Non string parameter for alert()

  
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
     function Application(Title, ProgramName, Path, Vendor) {
        this.Title = Title
        this.ProgramName = ProgramName
        this.Path = Path
        this.Vendor = Vendor
     }
   
     function displayApp() {
        alert(Application)
     }
   
</SCRIPT>
</HEAD>
<BODY>
<H1></H1>
<FORM>
<INPUT Type="button" Value="Display Object Definition" OnClick="displayApp()"
</INPUT>
</FORM>
</BODY>



Open a dialog window

  
<html>
<head>
<title>Open a dialog window</title>
<script type="text/javascript">
function openDialog(form) {
    var result = window.showModalDialog("http://www.wbex.ru", form, "dialogWidth:300px; dialogHeight:201px; center:yes");
}
</script>
</head>
<body>
<h1>Internet Explorer Modal Dialog Window</h1>
<hr /> 
<form name="sample" action="#" onsubmit="return false">
    Enter your name for the dialog box:
    <input name="yourName" type="text" />
    <input type="button" value="Send to Dialog" onclick="openDialog(this.form)" />
</form>
</body>
</html>



Pass integer value to alert dialog box

  
<html>
<head>
<title>A Simple Page</title>
<script language="javascript">
var msg1 = "Hello there", num1 = 22;
alert(msg1);
alert(num1);
</script>
</head>
<body>
</body>
</html>



Pass string parameter to alert dialog box

  
<html>
<head>
<title>A Simple Page</title>
<script language="javascript">
var msg1 = "Hello there", num1 = 22;
alert(msg1);
</script>
</head>
<body>
</body>
</html>



Pop-up Window - centred

  
<html>
<head>
<title>Pop-up</title>
<script language="javascript">
<!--
function PopupWin(page,IEWidth,IEHeight,NNWidth,NNHeight) {
  var MyBrowser = navigator.appName;
  if (MyBrowser == "Netscape") {
  var myWinWidth = (window.screen.width/2) - (NNWidth/2);
  var myWinHeight = (window.screen.height/2) - ((NNHeight/2) + 50);
  var myWin = window.open(page,"MainWin","width=" + NNWidth + ",height=" + NNHeight + ",screenX=" + myWinWidth + ",screenY=" + myWinHeight + ",left=" + myWinWidth + ",top=" + myWinHeight + ",scrollbars=yes,toolbar=0,status=1,menubar=0,resizable=0,titlebar=no");
  }else {
  var myWinWidth = (window.screen.width/2) - (IEWidth/2);
  var myWinHeight = (window.screen.height/2) - ((IEHeight/2) + 50);
  var myWin = window.open(page,"MainWin","width=" + IEWidth + ",height=" + IEHeight + ",screenX=" + myWinWidth + ",screenY=" + myWinHeight + ",left=" + myWinWidth + ",top=" + myWinHeight + ",scrollbars=yes,toolbar=0,status=1,menubar=0,resizable=0,titlebar=no");
  }
  myWin.focus();
}
//-->
</script>
</head>
<body>
<a href="javascript:PopupWin("http://www.wbex.ru",300,400,300,400)">New Window</a><br>
</body>
</html>



Prompt Input Dialog

  
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
var the_name=window.prompt("What is your name?","");
first_char=the_name.charAt(0);
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
if (first_char=="S"){
    document.write("Your name is "+the_name+"!");
}else{
    document.write("Your name needs to start with an uppercase S to be displayed!");
}
//-->
</SCRIPT>
</BODY>
</HTML>



String Object"s Length, Document.Location Properties, confirm and input dialog

  
<HTML>
<HEAD>
<TITLE>Properties</TITLE>
</HEAD>
<BODY>
<SCRIPT> 
   var theString = new String(); 
   theString = prompt("Enter a string: ",""); 
   document.write("The string "" + theString +  "" is " + theString.length + " characters long."); 
   if (window.confirm("Do you want to go to wbex today?")) 
     window.location = "http://www.wbex.ru"; 
</SCRIPT>
</BODY>
</HTML>



Tab key in the alert dialog box

  
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
alert("This line has a tab\there");
</script>
</head>
<body>
</body>
</html>



The Prompt Dialog Box: check the return result

  
<HTML>
<HEAD>
<TITLE>window.prompt() Method</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function populateTable() {
    var howMany = prompt("Fill in table for how many factors?","")
    if (howMany != null && howMany != "") {
        alert("Filling the table for " + howMany)
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<!-- other statements that display and populate a large table -->
<INPUT TYPE="button" NAME="fill" VALUE="Fill Table..." onClick="populateTable()">
</FORM>
</BODY>
</HTML>



Use if-else with confirm dialog

  
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
var response = confirm("OK or Cancel.");
if ( response == true ){
    alert("A fine choice!");
}else{
    alert("Are you sure?  JavaScript is fun!");
}
</script>
</head>
<body>
</body>
</html>



Use prompt for password checking

  
<html>
<head>
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <title>My First JavaScript Script</title>
  <script language="JavaScript">
  <!--
    function passCheck(){
      if(prompt("Please enter your password","") == "letmein"){
        window.location = "http://www.wbex.ru";
      }else{
        window.location = "http://www.wbex.ru";
      }
    }
  //-->
  </script>
</head>
<body onload="passCheck()">
  <noscript>
      Your browser either does not support JavaScript or your have it turned off. 
  </noscript>
</body>
</html>



User input

  
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
     function showBox() {
             userText = prompt("Enter the text for your personalized browser window.","My own browser text");
           if (userText != null) {
              userWindow = window.open("", "userTextWindow", "toolbar=0");
              userWindow.document.write("<h1>" + userText + "</h1>") };
     }
</SCRIPT>
<BODY>
<FORM>
<INPUT Type="button" Value="Create Your Own HTML Page" OnClick="showBox()"
</INPUT>
</FORM>
</BODY>



What is the output of a confirm dialog

  
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
var response = confirm("OK or Cancel.");
alert(response)
</script>
</head>
<body>
</body>
</html>



Working with the Alert, Confirm, and Prompt Methods

  
<HTML>
<HEAD>
<TITLE>Simple dialogs</TITLE>
<SCRIPT> 
   function showAlert(inText) { 
      alert (inText); 
   } 
   function showConfirm(){ 
      if (confirm("True or False?") == true) 
         return "true" 
      else 
         return "false"; 
   } 
   function showPrompt(inText){ 
      var retVal = "" 
      retVal = prompt(inText, "FirstName LastName"); 
      if (retVal == "" || retVal == null) 
         return "nameless one"; 
      else 
         return retVal; 
   } 
   </SCRIPT>
</HEAD>
<BODY>
<FORM Name="theForm">
<TABLE cellspacing=5>
<TR>
<TD>
<INPUT Type=Text Name="alertText" Size=40>
<TD>
<INPUT Type=Button Value="Alert" onClick="showAlert(alertText.value);">
</TR>
<TR>
<TD>
<INPUT Type=Text Name="decisionText" Size=40>
<TD>
<INPUT Type=Button Value="Confirm" onClick="decisionText.value=showConfirm();">
</TR>
<TR>
<TD>
<INPUT Type=Text Name="nameText" Size=40>
<TD>
<INPUT Type=Button Value="Prompt" onClick="nameText.value = "Hello, " + showPrompt("What is your name?");">
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>



Yes/No Confirmation

  
<html>
<head>
<title>Untitled Normal Page</title>
<SCRIPT LANGUAGE="JavaScript">
      function confirmAction() {
        return confirm("Do you really want this subscription?")
      }
   
</SCRIPT>
</head>
   
<body>
<h2><em>JavaScript Chronicles -- Free Subscription Form</em></h2>
<form action="mailto:subscribe@website.ru" method="POST" name="SubscribeForm" onSubmit="return confirmAction()">
<ol>
<li>What other magazines do you currently subscribe to?
<pre><input type=checkbox name="C1-SKU01" value="SKU01">PC Week
<input type=checkbox name="C1-SKU04" value="SKU04">DBMS
<input type=checkbox name="C1-SKU07" value="SKU07">Wired
<input type=checkbox name="C1-SKU10" value="SKU10">Yahoo
<input type=checkbox name="C1-SKU02" value="SKU02">InfoWorld
</pre>
  
</li>
<li>Please enter the reason you would like to subscribe to<em>JavaScript:</em><br>
<br>
<textarea name="Comments" rows=6 cols=46></textarea></li>
</ol>
<p>
<input type=submit name="Submit" value="Submit">
</form>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Window_Browser/Dialog&oldid=3959»