By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,708 Members | 2,086 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,708 IT Pros & Developers. It's quick & easy.

dhtml modal window issue in firefox

P: 6
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:

Expand|Select|Wrap|Line Numbers
  1. <link rel="stylesheet" href="~/dhtml/windowfiles/dhtmlwindow.css" type="text/css" />
  2. <link rel="stylesheet" href="~/dhtml/modalfiles/modal.css" type="text/css" />
  3. <script type="text/javascript" src="dhtml/windowfiles/dhtmlwindow.js">
  4. </script>
  5. <script type="text/javascript" src="dhtml/modalfiles/modal.js"></script>
  6. <script type="text/javascript">
  7. function openhelp(vPage){
  8.     vWindow=dhtmlmodal.open('Help', 'iframe','' + vPage+ '', 'Info', 'width=900px,height=500px,center=1,resize=0,scrolling=1')
  9. </script>
thanks in advance...
Jul 3 '08 #1
Share this Question
Share on Google+
9 Replies


acoder
Expert Mod 15k+
P: 16,027
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.
Jul 3 '08 #2

P: 6
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....
Jul 4 '08 #3

acoder
Expert Mod 15k+
P: 16,027
It's a z-index problem. The DHTML window only has a z-index of 100, while the "MainMenu" and "MainContenido" 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.
Jul 4 '08 #4

P: 6
It's a z-index problem. The DHTML window only has a z-index of 100, while the "MainMenu" and "MainContenido" 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:

Expand|Select|Wrap|Line Numbers
  1. .drag-handle{ /*Overwrite default drag handle bar background color with below*/
  2. background-color: #03277C;
  3. }
  4.  
  5. #interVeil{ /*CSS for veil that covers entire page while modal window is visible*/
  6. position: absolute;
  7. background: black url(blackdot.gif);
  8. width: 10px;
  9. left: 0;
  10. top: 0;
  11. z-index: 5;
  12. visibility: hidden;
  13. filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
  14. opacity: 0.8;
  15. }
and according to what you just said, i found this in dhtmlwindow.js:
Expand|Select|Wrap|Line Numbers
  1.     this.zIndexvalue=(this.zIndexvalue)? this.zIndexvalue+1 : 100 //z-index value for DHTML window: starts at 0, increments whenever a window has focus
  2.     var t=document.getElementById(t)
  3.     var divs=t.getElementsByTagName("div")
  4.     for (var i=0; i<divs.length; i++){ //go through divs inside dhtml window and extract all those with class="drag-" prefix
  5.         if (/drag-/.test(divs[i].className))
  6.             t[divs[i].className.replace(/drag-/, "")]=divs[i] //take out the "drag-" prefix for shorter access by name
  7.     }
  8.     t.style.zIndex=this.zIndexvalue //set z-index of this dhtml window
  9.     t.handle._parent=t //store back reference to dhtml window
  10.     t.resizearea._parent=t //same
  11.     t.controls._parent=t //same
  12.     t.onclose=function(){return true} //custom event handler "onclose"
  13.     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.zIndexvalue=(this.zIndexvalue)? this.zIndexvalue+1 : 100"
to
"this.zIndexvalue=(this.zIndexvalue)? this.zIndexvalue+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?
Jul 4 '08 #5

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

thanks in advance...
Jul 4 '08 #6

acoder
Expert Mod 15k+
P: 16,027
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.
Jul 4 '08 #7

P: 6
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...
Jul 4 '08 #8

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

z-index, i had heard of it but never used it...
Jul 4 '08 #9

acoder
Expert Mod 15k+
P: 16,027
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.
Jul 5 '08 #10

Post your reply

Sign in to post your reply or Sign up for a free account.