The Select box is always blocked when the layer encounters a drop-down box? In fact, this is the bug of IE, other browsers do not have this problem, for this issue a lot of forums, here to provide my several methods, each has its own advantages, mistakes, have a good opinion of the people put forward, thank you.
1. The most direct way: hide the Drop-down box.
A more general set of functions is provided below:
Test.htm
------------
<script>
var hideelementtemp = new Array ();
When you click on the menu, call this function, 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<window.document.all.tags (strelementtagname). length; i++) {
var objtemp = window.document.all.tags (Strelementtagname) [i];
if (!objtemp| |! Objtemp.offsetparent)
Continue
var intobjleft=cal_getoffsetleft (objtemp);
var intobjtop=cal_getoffsettop (objtemp);
if (((intobjleft+objtemp.clientwidth) >intdivleft) &&
(intobjleft<intdivleft+calendardiv.style.poswidth) &&
(intobjtop+objtemp.clientheight>intdivtop) &&
(Intobjtop<intdivtop+calendardiv.style.posheight)) {
The length of the Var inttempindex=hideelementtemp.length;//already
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;ivar 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" >
Click let Select Hide
</div>
<br><br><br><br><br><br>
<input type= "button" value= "Click let Select Show" >
The above method, if the number of the Select box is less, relatively fixed, directly with obj.style.visibility= "hidden" to hide is more direct.
2.Object objects have higher precedence and can block the Select box
<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. Using an IFRAME as a carrier
The following is a simple example:
<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>
<!--
Provide a positioning function, using an IFRAME as a carrier, will not be blocked by select
-->
<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>
<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)
Window.frames[ifm.name].document.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= ' hidden '
}
</script>
<br><select></select>
<div id=div1 style= "Visibility:hidden;" >
<div href= "http://www.csdn.net" > Chinese programmer </div>
<div href= "http://www.webjx.com" >webjx</div>
</div>
</body>
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
