DelphiFAQ Home Search:
General :: Programming :: JavaScript
Code snippets to add functionality to your HTML pages, preferably cross-browser.

Articles:

This list is sorted by recent document popularity (not total page views).
New documents will first appear at the bottom.

Featured Article

A SELECT box shines through an overlayed DIV section

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';

Generated 12:02:00 on Oct 20, 2017