C#
C++ (7)
Delphi (618)
Java (8)
JavaScript (30)
Document (8)
Events (8)
ExtJS (8)
Strings (3)
perl (9)
php (4)
VBScript (1)
Visual Basic (1)
Exchange Links
About this site
A SELECT box shines through an overlayed DIV section
This article has not been rated yet. After reading, feel free to leave comments and rate it.
Question:
I need to display a kind of modal dialog box on top of a form. I use a DIV section for this and gave it a z-index of 5. The form below has a z-index of 3. The modal dialog box shows on top of the form except that a SELECT (drop down) menu is rendered on top of the new box. It is as if it had a 'topmost' style.This appears only in Internet Explorer, not in Firefox.
Answer:
This is a known problem in IE (5 and 6, at least). SELECT boxes are rendered topmost - ignoring the z-index value.The workaround is to temporarily hide the offending elements (all SELECT elements). Look at the code below - to make matters worse, some real old browser versions require a 'hide'/'show' there (instead of 'hidden'/'visible').
 |  | |
// put this in the event handler that displays the modal box: document.getElementByID("selectID").style.visibility = 'hidden'; // when the modal box closes, put this code in the event handler: document.getElementByID("selectID").style.visibility = 'visible'; | ||
 |  |
Comments:
| ||
|
Above solution doesn't work. There should be getElementById not ...ByID. In JS letter case does matter.
| ||
| ||
|
can u give any example for this
 Keywords: |
