现在服务器端定义了一个Panel, 要让它动态地显示在某一个控件的下面, 且不被DropDown等控件挡住(如同Atlas的PopupPanel效果), 查阅了资料并进行改进, js方法如下:
function GetPopupPos(el,ePro) /// 动态定义位置
{
var ePos=0;
while(el!=null)
{
ePos+=el["offset"+ePro];
el=el.offsetParent;
}
return ePos;
}
function PopupDivArea(TargetControlName, DivName ,state) //利用iframe遮挡,显示控件
{
var TgtRef = document.getElementById(TargetControlName);
var DivRef = document.getElementById(DivName);
var IfrRef = document.getElementById("LHBIS_PopupDivIfram");
if (IfrRef == null)
{
var IfrRef = document.createElement("IFRAME");
IfrRef.src="javascript:false;" ;
IfrRef.id = "LHBIS_PopupDivIfram"
IfrRef.scrolling="no" ;
IfrRef.frameborder="0" ;
IfrRef.style.position='absolute';
IfrRef.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
document.body.appendChild(IfrRef);
}
if(state)
{
// DivRef.style.left = 0;
// DivRef.style.top = 0;
DivRef.style.pixelLeft = GetPopupPos(TgtRef,"Left");
DivRef.style.pixelTop = GetPopupPos(TgtRef,"Top") + TgtRef.offsetHeight;
DivRef.style.display = "block";
DivRef.style.position = 'absolute';
DivRef.style.zIndex = 1000;
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";
}
}
___________________________________________________________
客户端调用方法如下:
PopupDivArea('TextBox1','Panel1',true); //显示
PopupDivArea('Button1','Panel1',false);//隐藏