Problem
The online user display area (implemented by Div) of the property management system cannot cover the select (drop-down box) elements on the bottom interface.
Solution
Drop-down box, that is, the Select element of HTML ,. the dropdownlist in net design is the javaswed element in HTML. Especially after IE6, it is almost the only javaswed element (and a few rarely used items such as popup ). Common elements: Textbox, Div, table ...... These are windowless elements, which are mutually covered by Z-index. On top of them, select these Semantic Wed elements. In general, select cannot be overwritten by Div or table. This problem is widely used in the use of various pop-up controls, such as calendar controls. If you want to display the DIV, the previous method is dynamic. When the DIV is displayed, make the select of the DIV area invisible, and restore the select elements when the DIV disappears. This method is strange because it does not strictly "overwrite" the SELECT statement, but completely disappears. If the calendar pop-up element is only part of the select element, however, the entire SELECT statement does not exist, and the user may find it strange. It is also troublesome to do so. Use js to determine the positions of each select statement one by one.
After ie5.5, there is a new trick called "iframe shim" (IFRAME plugging: P), which can truly "Overwrite" the select element. It uses a special element: IFRAME. Before ie5.5, IFRAME is also a wed element, but from 5.5, IFRAME is a common windowless element. However, although it is a windowless element, IFRAME can cover select. The principle of this approach is to put an IFRAME in the same size and position as the object you want to display (for example, a div), and set Z-index to make the IFRAME under this div; in this way, IFRAME overrides select. At the same time, IFRAME is under the DIV to be displayed, and the DIV is exposed.
Restrictions: Only applicable to ie5.5 and later versions.
Reference Links:
Http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.ASPx
Sample Code:
// HTML. select. hack. iframe shim.htm
<HTML>
<Head>
<Script>
Function DivSetVisible (state)
{
Var DivRef = document. getElementById ('popupdiv ');
Var IfrRef = document. getElementById ('divshim ');
If (state)
{
DivRef. style. display = "block ";
IfrRef. style. width = DivRef. offsetWidth;
IfrRef. style. height = DivRef. offsetHeight;
IfrRef. style. top = DivRef. style. top;
IfrRef. style. left = DivRef. style. left;
IfrRef. style. zIndex = DivRef. style. zIndex-1;
IfrRef. style. display = "block ";
}
Else
{
DivRef. style. display = "none ";
IfrRef. style. display = "none ";
}
}
</Script>
</Head>
<Body background = "http://www.orkut.com/img/ I _blau2.gif">
<Form>
<Select>
<Option> A Select Box is Born... </option>
</Select>
</Form>
<Div
Id = "PopupDiv"
Style = "position: absolute; font: italic normal bolder 12pt Arial; top: 25px; left: 50px; padding: 4px; display: none; color: # ffff00; z-index: 100 ">
... And a DIV can cover it up <br> through the help of an IFRAME.
</Div>
<Iframe
Id = "DivShim"
Src = "javascript: false ;"
Scrolling = "no"
Frameborder = "0"
Style = "position: absolute; top: 0px; left: 0px; display: none; filter = progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 0);">
</Iframe>
<Br>
<Br>
<A href =.../../"#" onclick = "divsetvisible (true)"> click to show Div. </a>
<Br>
<Br>
<A href =.../"#" onclick = "divsetvisible (false)"> click to hide Div. </a>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
