A bit of problem with implementing a modal dialog

Question

I am developing a modal dialog as a part of a web application. There is one thing that's been of a puzzle to me. Please watch a movie clip that I just uploded at http://inter.freetzi.com/example/. I feel strongly that I have to accompany my question with a video because this is the case when it's better to see once, than to hear 100 times.

(It could be vertical scrolling, or both vertical and horizontal at the same time. But I am using horizontal scrolling in my example, so watch for it.)

Here's about my question:

Width of the transparent mask affects the width of the page itself. But in Opera, for exemple, every time the window gets resized, the page gets width that is at most close to 'true'. While in IE, once the transparent mask has affected the width, afterwards the page remembers it and stays with it. What is the problem and how to settle it? How to make IE behave the way Opera does?

In my project, I do the following:

//curViewpointW and curViewpointH are current width and height of the viewpoint (current is meant to be the moment of the resize event) 
oMask.style.width = curViewpointW + 'px';
oMask.style.height = curViewpointH + 'px';  

var pageWH = getPageWH(); //getPageWH() is a function that gets current width and height of the page (with scrolling if there is any)
var curPageW = pageWH[0];
var curPageH = pageWH[1];

if (curPageW > curViewpointW) {
 oMask.style.width = curPageW + 'px'; 
} 
if (curPageH > curViewpointH) {
 oMask.style.height = curPageH + 'px'; 
}

But IE ignores that somehow...

P.S. It's jQuery in my example, so many of you may have used its dialog before.

Answer 1

Have you looked into setting an onresize event handler that will adjust your mask dimensions when the window is resized? If you are using Prototype, you can set up such a handler unobtrusively like this:

Event.observe(document.onresize ? document : window, "resize", function() {//dostuff});

courtesy of the Roberto Cosenza blog