javascript 通用对话框类
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
/*
对话框类
作者:吾非无心
创建时间:2009.2
-----------------------------------------------------------------------------------------------------
修改记录:
2009.4.15——在原基本窗口类的基础上修改、完善为对话框类
*/
function LeesDialogWindow(w,h,title,id,classname,access,content)
{
var _this=this;
this.width=w?w:100;
this.height=h?h:60;
this.title=title?title:"";
this.className=classname?classname:"";
this.access=access?access:"";
this.content=content?content:"";
this.parent=null;
this.isClosed=true;
this.isPlaced=false;//是否已经被放置
this.parent=null;
this.window=null;
this.contentWindow=null;
this.accessContent=null;
this.titleWindow=null;
this.titleContentWindow=null;
this.closeButton=null;
function buildThisWindow()//创建窗口
{
if(_this.window)
return;
var vTitleType=2;
_this.window=document.createElement("div");
if(_this.className&&_this.className.length>0)
_this.window.className=_this.className;
if(parseInt(_this.height)>0)
_this.window.style.height=_this.height+(parseInt(_this.height)==_this.height?"px":"");
if(parseInt(_this.width)>0)
_this.window.style.width=_this.width+(parseInt(_this.width)==_this.width?"px":"");
_this.window.style.zIndex=100;
_this.window.style.position="absolute";
_this.window.style.border="solid 1px #99BBE8";
_this.window.style.clear="none";
var oTmpDiv=null;
//如果有固定标题
{
oTmpDiv=document.createElement("div");
oTmpDiv.style.width="100%";
oTmpDiv.style.height="100%";
oTmpDiv.style.borderStyle="none";
oTmpDiv.style.backgroundColor="white";
}
//需要标题
{
_this.titleWindow=document.createElement("div");
var oTitle=_this.titleWindow;
//oTitle.id=_this.titleId;
oTitle.style.height="23px";
oTitle.style.lineHeight="23px";
oTitle.style.backgroundImage="url(/images/windowtitle.gif)";
oTitle.style.verticalAlign="middle";
oTitle.unselectable="on"
oTitle.style.MozUserSelect="none";
//如果需要关闭按钮
{
_this.closeButton=document.createElement("div");
var oClose=_this.closeButton;
oClose.style.width="15px";
oClose.style.height="15px";
oClose.style.lineHeight="15px";
oClose.style.margin="4px 4px 0 0";
try{oClose.style.styleFloat="right";}catch(ex){};
try{oClose.style.cssFloat="right";}catch(ex){};
oClose.style.backgroundImage="url(/images/titlebuttons.gif)";
oClose.style.backgroundRepeat="no-repeat";
oClose.style.backgroundPosition="0 0";
oClose.style.display="inline";
oClose.style.cursor="pointer";
oClose.style.border="0";
oClose.onmouseover=function(){
this.style.backgroundPosition="-15px 0";
}
oClose.onmouseout=function(){
this.style.backgroundPosition="0 0";
}
oClose.onclick=function(){
_this.CloseWindow();
}
oTitle.appendChild(oClose);
}
_this.titleContentWindow=document.createElement("div");
var oTitleContentWindow=_this.titleContentWindow;
oTitleContentWindow.style.height="23px";
oTitleContentWindow.style.lineHeight="23px";
oTitleContentWindow.style.marginRight="20px";
oTitleContentWindow.style.verticalAlign="middle";
oTitleContentWindow.unselectable="on";
oTitleContentWindow.style.MozUserSelect="none";
oTitleContentWindow.style.paddingLeft="1em";
if(_this.title.length>0)
oTitleContentWindow.appendChild(document.createTextNode(_this.title));
oTitle.appendChild(oTitleContentWindow);
//如果有固定标题
oTmpDiv.appendChild(oTitle);
}
_this.contentWindow=document.createElement("div");
oContentDiv=_this.contentWindow;
//oContentDiv.id=_this.contentId;
//oContentDiv.style.width="100%";
oContentDiv.style.padding="5px 5px 5px 5px";
//有固定标题
{
//oContentDiv.style.zIndex=1;
}
oContentDiv.style.border="none";
oContentDiv.innerHTML=_this.content;
{
if(oTmpDiv!=null)
{
oTmpDiv.style.position="absolute";
oTmpDiv.style.zIndex="2";
}
else
{
oContentDiv.style.position="absolute";
oContentDiv.style.zIndex="2";
}
}
//如果有固定标题
{
oTmpDiv.appendChild(oContentDiv);
_this.window.appendChild(oTmpDiv);
}
document.body.appendChild(_this.window);
_this.SetWindowContentByUrl(_this.access);
if(parseInt(_this.height)>0)
{
_this.contentWindow.style.height=(_this.window.clientHeight-11-23)+"px";
}
//--------创建灰色遮盖层
var obj=document.getElementById("Lees_OverFlow_Div")||null;
if(obj==null)
{
obj=document.createElement("div");
obj.id="Lees_OverFlow_Div";
obj.style.zIndex="99";
obj.style.position="absolute";
obj.style.left="0";
obj.style.top="0";
obj.style.width="100%";
obj.style.backgroundColor="#000000";
obj.style.filter="Alpha(opacity=70)";
obj.style.MozOpacity=".7";
obj.style.opacity="0.7";
obj.style.display="none";
var oIframe=document.createElement("iframe");
oIframe.frameborder="0";
oIframe.style.border="0";
oIframe.style.position="absolute";
oIframe.style.backgroundColor="#000000";
oIframe.style.filter="Alpha(opacity=0)";//For IE
oIframe.style.width="100%";
oIframe.style.height="100%";
oIframe.style.top="0px";
oIframe.style.left="0px";
oIframe.src="about:blank";
obj.appendChild(oIframe);
document.body.appendChild(obj);
}
}
//移动窗口
_this.moveWindow=function()
{
var o=_this.window;
if(o.style.display=="none")
return;
var dw=((document.documentElement.clientHeight == 0)?document.body.clientWidth:document.documentElement.clientWidth);
var dh=((document.documentElement.clientHeight == 0)?document.body.clientHeight:document.documentElement.clientHeight);
//页面显示区域顶部坐标
var pt=document.documentElement.scrollTop;
//页面显示区域左边坐标
var pl=document.documentElement.scrollLeft;
var lf=0;
if(dw-10<=_this.width)
lf=0;
else
lf=(dw-_this.width)/2;
o.style.left=pl+lf+"px";
var tp=0;
if(dh-20<=_this.height)
tp=0;
else
tp=(dh-20-_this.height)/4;
o.style.top=pt+tp+"px";
document.getElementById("Lees_OverFlow_Div").style.height=((document.documentElement.clientHeight == 0)?document.body.scrollHeight:(document.documentElement.scrollHeight>document.documentElement.clientHeight?document.documentElement.scrollHeight:document.documentElement.clientHeight))+"px";
document.getElementById("Lees_OverFlow_Div").style.width=((document.documentElement.clientHeight == 0)?document.body.scrollWidth:document.documentElement.scrollWidth)+"px";
setTimeout(function(){_this.moveWindow();},10);
}
this.SetTitle=function(s)
{
_this.titleContentWindow.innerHTML=s;
}
this.CloseWindow=function()
{
if(_this.isClosed||!_this.isPlaced)
return;
_this.isClosed=true;
_this.isPlaced=false;
document.getElementById("Lees_OverFlow_Div").style.display="none";
_this.window.style.display="none";
}
this.DeleteWindow=function()
{
if(!this.isPlaced)
return;
if(this.parent==null)
return;
this.isClosed=true;
this.isPlaced=false;
this.parent.removeChild(this.window);
this.parent=null;
this.contentWindow=null;
}
this.ShowWindow=function()
{
if(!this.window)
buildThisWindow();
_this.isClosed=false;
_this.isPlaced=true;
_this.window.style.display="block";
document.getElementById("Lees_OverFlow_Div").style.display="";
_this.moveWindow();
}
this.SetWindowSize=function(w,h)
{
if(this.window)
{
_this.height=h;
_this.width=w;
_this.window.style.height=this.height+(parseInt(this.height)==this.height?"px":"");
_this.window.style.width=this.width+(parseInt(this.width)==this.width?"px":"");
}
this.contentWindow.style.height=(parseInt(_this.window.style.height)-11-23)+"px";
this.contentWindow.style.width=(parseInt(_this.window.style.width)-1)+"px";
}
this.SetWindowContent=function(s)
{
_this.contentWindow.innerHTML=s;
}
this.SetWindowContentFromRequest=function(o)
{
_this.accessContent=o.responseText;
_this.contentWindow.innerHTML=_this.accessContent;
}
this.SetWindowContentByUrl=function(s)
{
if((_this.access||"").length<1)
return;
if(_this.accessContent==null)
{
var vAccess=_this.access;
// if(vAccess.indexOf("://")>-1)
// vAccess="/geturl.aspx?url="+escape(vAccess);
_this.contentWindow.innerHTML="正在加载……";
LeesAjaxRequest.Get({url:vAccess,success:_this.SetWindowContentFromRequest,failure:function(o){alert(o.responseText);},headers:{Content_Type:"application/x-www-form-urlencoded;charset=utf-8"}});
}
else
{
_this.contentWindow.innerHTML=_this.accessContent;
}
}
}
说明:如果对话框内容为单独网页,需要与LeesAjaxRequest.js结合使用
使用示例:
//ie browser
if (vBrowser.isIE) {
document.onreadystatechange = function() {
if (document.readyState=="complete") {
doInit();
}
}
//firefox browser
}else {
document.addEventListener("DOMContentLoaded", doInit, false);
}
function doInit()
{
//从网页中动态加载对话框内容
dlg=new LeesDialogWindow(330,310,"title","id","","/xxxx/xxxx/subjectmanage.htm?ver4","");
dlg.ShowWindow();//先显示,再关闭;显示的目的是使动态创建的网页元素可用
dlg.CloseWindow();//关闭的目的,是因为当前用不着它
getSubjectList();
var str_loading="<div unselectable=\"on\" style=\"_moz-user-select:none;margin:20px auto;font-size:15px;font-weight:bold;text-align:center;width:150px;height:30px;\">正在传输数据……</div>"
+"<div unselectable=\"on\" style=\"_moz-user-select:none;margin:10px auto;text-align:center;width:40px;height:40px;\"><img src=\"/images/loading01.gif\" alt=\"正在加载\" /></div>";
//对话框内容为指定HTML字符串
//"请等待","正在加载..." 这样一个对话框
dlg_loading=new LeesDialogWindow(220,150,"请等待","loading","","",str_loading);
dlg_loading.ShowWindow();
dlg_loading.CloseWindow();
dlg_loading.closeButton.style.display="none";
dlg_loading.contentWindow.style.MozUserSelect="none";//FF下不允许选中内容
dlg_loading.contentWindow.unselectable="on";//IE下不允许选中内容
}