The following code will allow you to popup a DIV tag so that even if the DIV tag is displayed over a SELECT tag the DIV will not show any of the select tag. The way it does this is by placing an IFRAME over the top of the DIV tag.
Examples in both IE and Mozzila below.
 |
| IE 6 |
 |
| Mozilla Firefox 1.04 |
The code also uses a free 3rd party Javascript library called Anchor Position by Matt Kruse - http://www.mattkruse.com/
This library allows you to get the location of an element on the page. It will return the XY coordinates of the element. It is used to handle the placement of the DIV tag in the example below.
I also use a blank.htm file for the src parameter of the IFRAME - you may be able to get rid of this by using a javascript function instead.
The following code works in both IE 6 and also Mozilla Firefox 1.04 - I have not tested on other browsers at this time.
For a live demo see http://blog.crowe.co.nz/attachments/DivTagDemo.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>How to popup a DIV over a SELECT Tag</title>
</head>
<body bgcolor=#FFFFCC>
<script language="javascript" src="AnchorPosition.js"></script>
<!--
This is our DIV Tag that will popup over the current content, when we popup our div tag, we place
an IFRAME over the top of the div tag. This is so we can hide the Select tag.
We then place a table after the IFRAME and force it to be positioned starting at the top left
of our div tag.
-->
When you click the link below the popup will show over the top of the div
<div id="floatingdiv" style="position:absolute;display:none;left=30;top=20;width=300;height=150">
<iframe id="selectblocker" style="position:relative;"
frameBorder="0" scrolling="no" src="blank.htm"></iframe>
<table border=1 cellspacing=5 id="contents" style="position:absolute; background-color: #CCFF99">
<tr>
<td valign='top'>This is the actual contents that we want to display within the DIV tag area.</td>
</tr>
</table>
</div>
<form method="POST" action="">
<table border=1 cellspacing=2 cellpadding=2>
<tr><td>Enter your name</td><td><input type="text" name="name" id="name" size=10 style="width:200px">
</td></tr>
<tr><td>Please select your occupation</td><td><select size="1" name="D1" id="D1" style="width:200px">
<option>Programmer</option>
</select>
</td></tr></table>
</form>
<!-- move our hide and show links away from the div tag -->
<a href="Javascript:Show();">Show</a>
<a href="Javascript:Hide();">Hide</a>
<script language="javascript">
function Show(){
var divTag = document.getElementById("floatingdiv");
var iFrameTag = document.getElementById("selectblocker");
var tableTag = document.getElementById("contents");
var AnchorPos = getAnchorPosition("name")
divTag.style.left=AnchorPos.x+20;
divTag.style.top=AnchorPos.y+22;
divTag.style.width=300;
divTag.style.height=150;
iFrameTag.style.left = 0;
iFrameTag.style.top = 0;
iFrameTag.style.width = divTag.style.width;
iFrameTag.style.height = divTag.style.height;
iFrameTag.style.zIndex = divTag.style.zIndex-1;
tableTag.style.left = 0;
tableTag.style.top = 0;
tableTag.style.width = divTag.style.width;
tableTag.style.height = divTag.style.height;
tableTag.style.zIndex = divTag.style.zIndex;
divTag.style.display = "block";
}
function Hide(){
var divTag = document.getElementById("floatingdiv");
divTag.style.display = "none";
}
</script>
</body>
</html>