When the layer encounters a drop-down box, is it always unable to block the select box? In fact, this is a bug in IE. other browsers do not have this problem. Many people have raised this issue in the forum. Here I provide several methods, each of which has its own advantages and is wrong, if you have any suggestions, thank you.
1. The most direct method is to hide the drop-down box.
The following provides a general set of functions:
Test.htm
------------
<SCRIPT>
VaR hideelementtemp = new array ();
// Call this function when you click the menu. The menu object
Function cal_hideelementall (OBJ ){
Cal_hideelement ("IMG", OBJ );
Cal_hideelement ("select", OBJ );
Cal_hideelement ("object", OBJ );
Cal_hideelement ("iframe", OBJ );
}
Function cal_hideelement (strelementtagname, OBJ ){
Try {
VaR showdivelement = OBJ;
VaR calendardiv = OBJ;
VaR intdivleft = cal_getoffsetleft (showdivelement );
VaR intdivtop = cal_getoffsettop (showdivelement); // + showdivelement. offsetheight;
// Hideelementtemp = new array ()
For (I = 0; I <zookeeper Doc ument. All. Tags (strelementtagname). length; I ++ ){
VaR objtemp = zookeeper Doc ument. All. Tags (strelementtagname) [I];
If (! Objtemp |! Objtemp. offsetparent)
Continue;
VaR export bjleft = cal_getoffsetleft (objtemp );
VaR export bjtop = cal_getoffsettop (objtemp );
If (Fig + objtemp. clientwidth)> intdivleft )&&
(Required bjleft <intdivleft + calendardiv. style. poswidth )&&
(Export bjtop + objtemp. clientheight> intdivtop )&&
(Export bjtop <intdivtop + calendardiv. style. posheight )){
// Var inttempindex = hideelementtemp. length; // The existing length.
// Save elementtagname is stutas
// Hideelementtemp [inttempindex] = new array (objtemp, objtemp. style. Visibility );
Hideelementtemp [hideelementtemp. Length] = objtemp
Objtemp. style. Visibility = "hidden ";
}
}
} Catch (e) {alert (E. Message)
}
}
Function cal_showelement (){
VaR I;
For (I = 0; I VaR objtemp = hideelementtemp [I]
If (! Objtemp |! Objtemp. offsetparent)
Continue;
Objtemp. style. Visibility =''
}
Hideelementtemp = new array ();
}
Function cal_getoffsetleft (SRC ){
VaR set = 0;
If (SRC & SRC. Name! = "Divmain "){
If (SRC. offsetparent ){
Set + = SRC. offsetleft + cal_getoffsetleft (SRC. offsetparent );
}
If (SRC. tagname. touppercase ()! = "Body "){
VaR x = parseint (SRC. scrollleft, 10 );
If (! Isnan (x ))
Set-= X;
}
}
Return set;
}
Function cal_getoffsettop (SRC ){
VaR set = 0;
If (SRC & SRC. Name! = "Divmain "){
If (SRC. offsetparent ){
Set + = SRC. offsettop + cal_getoffsettop (SRC. offsetparent );
}
If (SRC. tagname. touppercase ()! = "Body "){
Var y = parseint (SRC. scrolltop, 10 );
If (! Isnan (y ))
Set-= y;
}
}
Return set;
}
</SCRIPT>
<SELECT> </SELECT>
<SELECT> </SELECT>
<Div style = "position: absolute; left: 0; top: 0; width: 100; Height: 100; Background-color: Red" onclick = "cal_hideelementall (this)">
Click to hide select
</Div>
<Br>
<Input type = "button" value = "click to show select" onclick = "cal_showelement ()">
In the preceding method, if the number of select boxes is small and relatively fixed, directly use obj. style. Visibility = "hidden" to hide them more directly.
2. The priority of the object is high, and the select box can be blocked.
<Object ID = AA style = "display: none; Z-index: 1000; position: absolute; top: 0; left: 0; width: 152; Height: 200; "type =" text/X-scriptlet "Data =" about: <body> <Div style = 'position: absolute; left: 0; top: 0; width: 152; height: 200; Font: 14; color: White; Background: black; Border: 1 solid black '> test </div> "> </Object>
<SELECT> <option> hellohellohellohello </SELECT> <button onclick = AA. style. Display = AA. style. Display = "NONE "? "": "NONE"> test </button>
Although this method is simple, it is not a good solution for complex layers.
3. Use IFRAME as the carrier
The following is a simple example:
-----------
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Meta name = "generator" content = "Microsoft FrontPage 4.0">
<Meta name = "progid" content = "FrontPage. Editor. Document">
<Title> simple menu </title>
<! --
Provides positioning functions. IFRAME is used as the carrier and will not be blocked by select.
By fason (2003-5-21)
-->
<Style id = s>
# Div1 {
Position: absolute;
Z-index: 100;
Width: 100;
Height: 130;
Background-color: # d2e8ff;
Border: 1 solid black;
}
Div {cursor: hand; font-size: 12px ;}
A {text-Decoration: none; color: red; font-size: 12px}
</Style>
</Head>
<Body>
<SCRIPT>
Function window. onload (){
VaR shtml = div1.innerhtml;
VaR IFM = Document. createelement ("<IFRAME frameborder = 0 marginheight = 0 marginwidth = 0 hspace = 0 vspace = 0 scrolling = NO> </iframe> ")
IFM. style. width = div1.offsetwidth
IFM. style. Height = div1.offsetheight
IFM. Name = IFM. uniqueid
Div1.innerhtml = ""
Div1.appendchild (IFM)
Response response frames[ifm.name).doc ument. Write (S. outerhtml + "<body leftmargin = 0 topmargin = 0>" + shtml + "</body> ")
}
Function show (){
With (document. All. img1 ){
X = offsetleft;
Y = offsettop;
Objparent = offsetparent;
While (objparent. tagname. touppercase ()! = "Body "){
X + = objparent. offsetleft;
Y + = objparent. offsettop;
Objparent = objparent. offsetparent;
}
Y + = offsetHeight-1
}
With (document. All. div1.style ){
Pixelleft = x
Pixeltop = y
Visibility =''
}
}
Function hide (){
Document. All. div1.style. Visibility = 'den den'
}
</SCRIPT>
<br> <SELECT> </SELECT>
<Div id = div1 onmouseover = "style. Visibility ='' "onmouseout =" style. Visibility = 'den den '"style =" visibility: hidden; ">
<Div href = "http://www.csdn.net" onmouseover = "style. backgroundcolor = 'highlight' "onmouseout =" style. backgroundcolor = ''" onclick = "window. open (href) "> Chinese programmers </div>
<Div href = "http://www.sohu.com" onmouseover = "style. backgroundcolor = 'highlight' "onmouseout =" style. backgroundcolor = ''" onclick = "window. open (href) "> Sohu </div>
</Div>
</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
