当前页面: 开发资料首页 → Javascript 专题 → 层遇到select框时
层遇到select框时
摘要: 层遇到select框时
作者:fason
当层遇到下拉框时总是挡不了select框?其实这是IE的BUG,其它的浏览器没有这个问题,对于这个问题论坛里不少提出,在这里提供我的几种方法,各有各的好处,有错,有好的意见者提出,谢谢.
1.最直接的方法:隐藏下拉框.
下面提供的是一个比较通用的一组函数:
test.htm
------------
<script>
var HideElementTemp = new Array();
//点击菜单时，调用此的函数,菜单对象
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
if(!objTemp||!objTemp.offsetParent)
continue;
var intObjLeft=cal_GetOffsetLeft(objTemp);
var intObjTop=cal_GetOffsetTop(objTemp);
if(((intObjLeft+objTemp.clientWidth)>intDivLeft)&&
(intObjLeft
(intObjTop
//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
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>
点击让select隐藏
<input type="button" value="点击让select显示" onclick="cal_ShowElement()">
以上这种方法,如果对于select框数目少,相对固定的话,直接用obj.style.visibility="hidden"这样进行隐藏是更直接的.
2.Object对象的优先度较高,可以挡住select框
<select><option>hellohellohellohello</select>
这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法
3.用iframe作载体
以下是一简单的例子:
-----------
<head>
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>
<select></select>
</body>
↑返回目录
前一篇: 用Javascript写的一个映射表(MAP)类－－续
后一篇: 一个简单的javascript菜单