The other day I stumbled upon Jeff’s blog about the modal window.
It was almost everything I needed.
My modal windows is:
My styles are:
document.getElementById(divID).style.display = "block";
document.getElementById(divID).style.display = "none";
The only thing that didn’t work for me from Jeff’s code was in the hideModal function. He had two extra lines to ensure the transparent overlay background moved with the window if the user scrolled the page. For me, the gray background remained static and if you were to scroll down, the rest of the page was not covered and could still receive interaction from the mouse. Jeff’s script might not have worked for me because I am running IE 8 Beta 2…although I was in IE 7 compatibility mode. Anyways, the fix for me was pretty simple and it lies in the #modalPage style. All I did was set the position to fixed. That did the trick!
Be warned, the current project I’m working on is an intranet site that will only be viewed on IE so I haven’t tested this fix with FireFox, Safari, or Opera.