Here's the description of the problems that we experimented using the modal
popup panel in a page where the DOCTYPE is declared.

When a modal popup is opened, the opening page should be disabled; but when the
the DOCTYPE is declared, the opening page is still modifiable.

Our pages contain DIV elements with absolute positioning (we avoid TABLE
elements for accessibility reasons) and when the DOCTYPE is declared the
ICEFACES javascript functions do not work properly.

In fact, ICEFaces uses this IFRAME for creating a layer which proceduces the
"disabled" effect:

 

<iframe id="iceModalFrame" src="/sia-pr/xmlhttp/blank.iface" style="z-index:
25000; opacity: 0.5; position: absolute; visibility: visible; background-color:
black; top: 0pt; left: 0pt; width: 1280px; height: 0px;">

 

As you can see, the "height" property value is "0px", so the layer which should
produce the disabled effect can't cover the opening page. ICEFaces calculates
this value using the "Ice.modal.start" javascript function:

 

_2c7.style.width=document.body.clientWidth+"px";

_2c7.style.height=document.body.clientHeight+"px";

 

But the javascript code of the "Ice.modal.start" function does not calculate the
right height value because our pages have the following peculiarities:

 

1) the DOCTYPE DECLARATION

2) DIV with absolute positioning

 

In fact, when absolute positioning is used in conjunction whith the DOCTYPE
declaration, the body height (accorinding to the DOM engine of the browser)
seems to be 0.

If just the DOCTYPE declaration is removed, the javascript functions work
properly, in fact this is the IFRAME which is created in that situation:

 

<iframe id="iceModalFrame" src="/sia-pr/xmlhttp/blank.iface" style="z-index:
25000; opacity: 0.5; position: absolute; visibility: visible; background-color:
black; top: 0pt; left: 0pt; width: 1280px; height: 912px;">

 

As you can see,now the height value is correct.

 

We tried patching that javascript using the following code and it worked fine:

 

function setMaskSize(transparentLayer) {

 

      var theBody = document.getElementsByTagName("BODY")[0];

      var fullHeight = getViewportHeight();

      var fullWidth = getViewportWidth();

 

     

      // Determine what's bigger, scrollHeight or fullHeight / width

      if (fullHeight > theBody.scrollHeight) {

            popHeight = fullHeight;

      } else {

            popHeight = theBody.scrollHeight;

      }

     

      if (fullWidth > theBody.scrollWidth) {

            popWidth = fullWidth;

      } else {

            popWidth = theBody.scrollWidth;

      }

 

      transparentLayer.style.height = popHeight + "px";

      transparentLayer.style.width = popWidth + "px";

}

 

 

 

function getViewportHeight() {

      if (window.innerHeight!=window.undefined) return window.innerHeight;

      if (document.compatMode=='CSS1Compat') return
document.documentElement.clientHeight;

      if (document.body) return document.body.clientHeight;

 

      return window.undefined;

}

 

function getViewportWidth() {

      if (window.innerWidth!=window.undefined) return window.innerWidth;

      if (document.compatMode=='CSS1Compat') return
document.documentElement.clientWidth;

      if (document.body) return document.body.clientWidth;

      return window.undefined;

}

 

setMaskSize(_2c7)