Modal windows on the web

I’ve been in web development for a while now and one thing I do notice is that web sites are headed towards a desktop user experience. One of the key UI elements is the modal window. You know, the that little window that won’t let you do anything until you respond to it. I’ve been having to use it in our web projects more and more. Usually, this effect is comprised of CSS and Javascript. Up till recently, I’ve only had a change to fumble my way trying to get all the pieces together for the correct effect. Then I would run out of time and end up using the ASP.Net AJAX modal control or another RAD control. I usually don’t have a problem with these controls but sometimes, I just want something lightweight with just enough functionality to do what I need.

The other day I stumbled upon Jeff’s blog about the modal window.
It was almost everything I needed.

My modal windows is:


<div id="modalPage">
<div class="modalBackground">
</div>
<div class="modalContainer">
<div class="modal">
</div>
</div>
</div>

My styles are:


.modalPage
{
display: none;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position:fixed;

}
.modalBackground {
filter: Alpha(Opacity=40);
-moz-opacity:0.4;
opacity: 0.4;
width: 100%;
height: 100%;
background-color: #999999;
position: absolute;
z-index: 500;
top: 0px;
left: 0px;

}
.modalContainer
{
position: absolute;
width: 600px;
left: 50%;
top: 50%;
z-index: 750;

}
.modal
{
background-color: white;
position: relative;
top: -150px;
left: -300px;
z-index: 1000;
width: 600px;
height: 300px;
padding: 0px;
}

And my javascript is

function revealModal(divID)
{
document.getElementById(divID).style.display = "block";
}

function hideModal(divID)
{
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.

HAPPY HALLOWEEN!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s