Dialog in JavaScript : Dialog « Window Browser « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » Window Browser » Dialog 
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.com
Copyright 2002 Danny Goodman.  All Rights Reserved.
************************************************************ */
// DHTMLapi.js custom API for cross-platform
// object positioning by Danny Goodman (http://www.dannyg.com).
// 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.styletrue false;
        isW3C = (isCSS && document.getElementByIdtrue false;
        isIE4 = (isCSS && document.alltrue false;
        isNN4 = (document.layerstrue false;
        isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1">= 0true 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" 
            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" 
            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"!= -|| ua.indexOf("MSIE 5.2"!= -1) {
            return "macosX";
        else {
            return "macos9";
        }
    else if (ua.indexOf("Windows XP"!= -|| ua.indexOf("NT 5.1"!= -1) {
        return "winxp";
    else if ((document.compatMode && document.compatMode != "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
                      : document.body.scrollLeft);
            offsetX -= (document.body.parentElement && 
                     document.body.parentElement.scrollLeft
                     document.body.parentElement.scrollLeft : 0
            offsetY = evt.offsetY - ((evt.offsetY < -2
                      : 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>


           
         
    
  
Related examples in the same category
1. Displays and monitors the most used dialog boxes
2. Open a dialog window
3.  String Object's Length, Document.Location Properties, confirm and input dialog
4.  Working with the Alert, Confirm, and Prompt Methods
5. Alert box (dialog) with line-breaks
6. Button click to display dialog
7. Pop-up Window - centred
8. Display a confirm box (dialog)
9. Display a prompt box (dialog)
10. Confirm Dialog Box
11. The Prompt Dialog Box: check the return result
12. Document for the Modeless Dialog Box
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
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.