dhtml modal window issue in firefox

[ninhovid]

Hi...

i'm new at dhtml, and i want to use it in help windows (instead of window.open() of javascript)...

i'm done it... but it works only in internet explorer.. in firefox 2 and 3 it opens the dhtml modal window but in the background of my main page... what do i have to correct so it opens up in front as it does in internet explorer?

i'm using c# and ajax... it's an asp.net app...
in masterpage i have this:

<link rel="stylesheet" href="~/dhtml/windowfiles/dhtmlwindow.css" type="text/css" />
<link rel="stylesheet" href="~/dhtml/modalfiles/modal.css" type="text/css" />
<script type="text/javascript" src="dhtml/windowfiles/dhtmlwindow.js">
</script>
<script type="text/javascript" src="dhtml/modalfiles/modal.js"></script>
<script type="text/javascript">
function openhelp(vPage){
	vWindow=dhtmlmodal.open('Help', 'iframe','' + vPage+ '', 'Info', 'width=900px,height=500px,center=1,resize=0,scrolling=1')
} 
</script>

thanks in advance...

[acoder]

Post the code for the two JavaScript files, or if possible, post a link to a test page. If not and if it's too much code, attach the files to your post instead.

[ninhovid]

here is the URL where i'm testing dhtml stuff... as you'll see, it won't work correctly in firefox...

http://189.132.59.130/popup/Derechos.aspx

tell me if you need something else...
thanks....

[acoder]

It's a z-index problem. The DHTML window only has a z-index of 100, while the "MainMenu" and "MainConten ido" divs have a z-index of 400 and 300 respectively. Either increase the z-index of the window or decrease the z-index of the divs.

[ninhovid]

It's a z-index problem. The DHTML window only has a z-index of 100, while the "MainMenu" and "MainConten ido" divs have a z-index of 400 and 300 respectively. Either increase the z-index of the window or decrease the z-index of the divs.

how did you know about z-indexes values by just accessing my test website?
i'm new at this and i don't know how to set such z-indexes properties... in modal.css i have this:

.drag-handle{ /*Overwrite default drag handle bar background color with below*/
background-color: #03277C;
}

#interVeil{ /*CSS for veil that covers entire page while modal window is visible*/
position: absolute;
background: black url(blackdot.gif);
width: 10px;
left: 0;
top: 0;
z-index: 5;
visibility: hidden;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
opacity: 0.8;
}

and according to what you just said, i found this in dhtmlwindow.js:

	this.zIndexvalue=(this.zIndexvalue)? this.zIndexvalue+1 : 100 //z-index value for DHTML window: starts at 0, increments whenever a window has focus
	var t=document.getElementById(t)
	var divs=t.getElementsByTagName("div")
	for (var i=0; i<divs.length; i++){ //go through divs inside dhtml window and extract all those with class="drag-" prefix
		if (/drag-/.test(divs[i].className))
			t[divs[i].className.replace(/drag-/, "")]=divs[i] //take out the "drag-" prefix for shorter access by name
	}
	t.style.zIndex=this.zIndexvalue //set z-index of this dhtml window
	t.handle._parent=t //store back reference to dhtml window
	t.resizearea._parent=t //same
	t.controls._parent=t //same
	t.onclose=function(){return true} //custom event handler "onclose"
	t.onmousedown=function(){dhtmlwindow.zIndexvalue++; this.style.zIndex=dhtmlwindow.zIndexvalue} //Increase z-index of window when focus is on it

from second code text i'm posting, line 1, i changed
"this.zIndexval ue=(this.zIndex value)? this.zIndexvalu e+1 : 100"
to
"this.zIndexval ue=(this.zIndex value)? this.zIndexvalu e+1 : 500"

and now it shows me the dhtml window in front! but... i can still move or do something in the back page, it's not disabled as in internet explorer...

what am i missing now?

[ninhovid]

i've published the website again...
now it shows in front of everything but does not disable parent page's controls...

thanks in advance...

[acoder]

how did you know about z-indexes values by just accessing my test website?

I used Firebug to inspect the elements.

I see that you got this from Dynamic Drive. Have you checked their documentation. Take the demo and adapt it to your requirements.

[ninhovid]

I used Firebug to inspect the elements.

I see that you got this from Dynamic Drive. Have you checked their documentation. Take the demo and adapt it to your requirements.

yes i have, but i'll double check, maybe i'm missing something..
thanks...

[ninhovid]

done!
i changed z-index to modal window and now it works perfectly

z-index, i had heard of it but never used it...

[acoder]

You fixed it yourself and learned something new along the way which can only be A Good Thing :)

Post again if you have any more questions.