I am not completely new to JavaScript (previous bits here, here, and there), but this is the first time I’m having to deal with floating DIVs as dialogs. So, from my little bit of experimenting came the following. If you are after something lighter than jQuery UI, this may prove useful to you.
<html>
<head>
<script type="text/javascript">
if (undefined === DialogJS) {
var DialogJS = (function () {
var dialogs = {};
function showAsDialog(elementId, ownerElementId) {
var element = document.getElementById(elementId);
var ownerElement =
(null !== ownerElementId)
? document.getElementById(ownerElementId)
: document.documentElement;
if ((null !== element) && (null !== ownerElement)) {
dialogs[elementId] = { element: element, ownerElement: ownerElement };
dialogs[elementId].element.style.display = "block";
}
centerDialogs();
}
function hide(elementId) {
if (undefined === dialogs[elementId]) {
return;
}
dialogs[elementId].element.style.display = "none";
}
function centerDialogs() {
for (var x in dialogs) {
centerDialog(dialogs[x]);
}
}
function centerDialog(dialog) {
if (null === dialog) {
return;
}
var parentWidth = dialog.ownerElement.clientWidth;
var parentLeft = dialog.ownerElement.offsetLeft;
if (parentWidth > document.documentElement.clientWidth) {
parentWidth = document.documentElement.clientWidth;
parentLeft = 0;
}
var parentHeight = dialog.ownerElement.clientHeight;
var parentTop = dialog.ownerElement.offsetTop;
if (parentHeight > document.documentElement.clientHeight) {
parentHeight = document.documentElement.clientHeight;
parentTop = 0;
}
var x = 0.5 * (parentWidth - dialog.element.clientWidth) + parentLeft;
var y = 0.5 * (parentHeight - dialog.element.clientHeight) + parentTop;
if (x < dialog.ownerElement.offsetLeft) {
x = dialog.ownerElement.offsetLeft;
}
if (y < dialog.ownerElement.offsetTop) {
y = dialog.ownerElement.offsetTop;
}
dialog.element.style.position = "absolute";
dialog.element.style.left = x + "px";
dialog.element.style.top = y + "px";
}
return {
showAsDialog: showAsDialog,
hide: hide,
centerDialogs: centerDialogs
};
})();
}
window.onresize = DialogJS.centerDialogs;
</script>
</head>
<body>
<input onclick="DialogJS.showAsDialog("dialog1", "page")" value="Show Dialog" type="button">
<input onclick="DialogJS.hide("dialog1")" value="Hide Dialog" type="button">
<div style="border-bottom: gray 1px solid; border-left: gray 1px solid; margin: auto; width: 600px; height: 700px; border-top: gray 1px solid; border-right: gray 1px solid" id="page">THIS IS THE CONTAINER <div style="border-bottom: black 1px solid; border-left: black 1px solid; background-color: antiquewhite; width: 100px; display: none; height: 100px; border-top: black 1px solid; border-right: black 1px solid" id="dialog1">THIS IS THE DIALOG </div> </div>
</body>
</html>