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.style) ? true : false;
isW3C = (isCSS && document.getElementById) ? true : false;
isIE4 = (isCSS && document.all) ? true : false;
isNN4 = (document.layers) ? true : false;
isIE6CSS = (document.compatMode && document.compatMode.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.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) ?
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>
Related examples in the same category