views:

71

answers:

2

Hi, I'm trying to make modal window for my website, I have a problem with overlay or modal div I'm not sure what is the problem.

The thing is everything except modal window shouldn't be clickable, but for some reason my navigation <ul><li> tags are visible and clickable. Here is css of my modal window :

element.style {
display:block;
left:50%;
margin-left:-210px; //generated with javascript
margin-top:-85px; //generated with javascript
position:fixed;
top:50%;
width:450px;
z-index:100;
}

Here is the css of my background overlay :

element.style {
height:1436px; //generated with javascript
left:0;
opacity:.75;
position:absolute;
top:0;
width:100%;
z-index:105;
}

What am I doing wrong ? thank you

+1  A: 

Check the z-index property of your li tags (or the underlying ul) and either set it below 100, or set the z-index of your modal window and overlay so it's higher than that of the lis.

Pekka
its already this way, their z-index is set to 5
Gandalf StormCrow
Are you trying this in IE?
Pekka
You were right .. I found somewhere in the css large z-index .. I don't know what got in to me for setting z-index to 5k .tnx
Gandalf StormCrow
Heh, when in a hurry, I tend to set 99999 :)
Pekka
A: 

It appears you have the values of your z-index backwards. The higher the number, the closer it is. Your background is set to 105 but the elements on top are set to 100.

jerebear