I found this nice DHTML dialog package at http://www.subimage.com/dhtml/subModal/

You can download the code here: http://www.subimage.com/dhtml/subModal/subModal.zip

However, it uses iframes as the source of the popup. I decided to change this and use innerHTML instead (and write to it from javascript)

Attached below are my changes. However, all of a sudden, the popup mask no longer displays. Also, the position of the popup is completely wrong. (FF & IE).

If anyone could take a look at this and tell me what is wrong I would appreciate it.

Thanks

Code:
//CHANGED INDEX.HTML
//---------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>subModal DHTML Modal Dialog / Modal Window Test Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="subModal.css" />
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="subModal.js"></script>
</head>
<body>

<button onclick="showPopWin('modalContent.html', 400, 200, null);">show modal window</button>

<div id="popup_mask"></div>
<div id="popup_container"></div>

</body>
</html>

//=================

//CHANGED SUBMODAL.JS
//----------------------

var gpopup_mask = null;
var gpopup_container = null;
var gpopup_message = null;
var gReturnFunc;
var gPopupIsShown = false;

var gHideSelects = false;

function initPopUp() {
  gpopup_mask      = document.getElementById("popup_mask");
  gpopup_container = document.getElementById("popup_container");

  if (gpopup_container.innerHTML == "") {
    gpopup_container.innerHTML = '<div id="popupInner"><div id="popupTitleBar"><div id="popupTitle"></div><div id="popupControls">' + 
                                                           '<img src="close.gif" onclick="hidePopWin(false);" /></div></div><div id="popupMessage">Loading...</div></div>';
  }
   
  gpopup_message   = document.getElementById("popupMessage");	
	
  var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10);
  if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) {
    gHideSelects = true;
  }
}

function showPopWin(url, width, height, returnFunc) {
  initPopUp();
  gPopupIsShown = true;
  gpopup_mask.style.display = "block";
  gpopup_container.style.display = "block";
 
  var titleBarHeight = parseInt(document.getElementById("popupTitleBar").offsetHeight, 10);
	
  gpopup_container.style.width = width + "px";
  gpopup_container.style.height = (height+titleBarHeight) + "px";

  gpopup_message.innerHTML = "Loaded";
  gpopup_message.style.width = width + "px";
  gpopup_message.style.height = height + "px";


  centerPopWin(width, height);
  gReturnFunc = returnFunc;
 
  if (gHideSelects == true) {
    hideSelectBoxes();
  }
}

var gi = 0;
function centerPopWin(width, height) {
  if (gPopupIsShown == true) {
    if (width == null || isNaN(width)) {
      width = gpopup_container.offsetWidth;
    }
    if (height == null) {
      height = gpopup_container.offsetHeight;
    }
     
    var fullHeight = getViewportHeight();
    var fullWidth = getViewportWidth();
		
    var theBody = document.documentElement;
		
    var scTop = parseInt(theBody.scrollTop,10);
    var scLeft = parseInt(theBody.scrollLeft,10);
		
    gpopup_mask.style.height = fullHeight + "px";
    gpopup_mask.style.width = fullWidth + "px";
    gpopup_mask.style.top = scTop + "px";
    gpopup_mask.style.left = scLeft + "px";
		
    window.status = gpopup_mask.style.top + " " + gpopup_mask.style.left + " " + gi++;
		
    var titleBarHeight = parseInt(document.getElementById("popupTitleBar").offsetHeight, 10);
		
    gpopup_container.style.top = (scTop + ((fullHeight - (height+titleBarHeight)) / 2)) + "px";
    gpopup_container.style.left =  (scLeft + ((fullWidth - width) / 2)) + "px";
  }
}

addEvent(window, "resize", centerPopWin);
window.onscroll = centerPopWin;

function hidePopWin(callReturnFunc) {
  gPopupIsShown = false;
  if (gpopup_mask == null) {
    return;
  }
  gpopup_mask.style.display = "none";
  gpopup_container.style.display = "none";
  if (callReturnFunc == true && gReturnFunc != null) {
    gReturnFunc(window.frames["popupFrame"].returnVal);
  }
  gpopup_message.innerHTML = "Loading...";

  if (gHideSelects == true) {
    displaySelectBoxes();
  }
}

function hideSelectBoxes() {
  for(var i = 0; i < document.forms.length; i++) {
    for(var e = 0; e < document.forms[i].length; e++){
      if(document.forms[i].elements[e].tagName == "SELECT") {
	document.forms[i].elements[e].style.visibility="hidden";
      }
    }
  }
}

function displaySelectBoxes() {
  for(var i = 0; i < document.forms.length; i++) {
    for(var e = 0; e < document.forms[i].length; e++){
      if(document.forms[i].elements[e].tagName == "SELECT") {
	document.forms[i].elements[e].style.visibility="visible";
      }
    }
  }
}

//ALL OTHER FILES ARE THE SAME
Thanks!