CSS部分
/*--------div对话框-----------*/
#dialog { background-color: #89A6CA; height: 180px; width: 300px; border: 1px solid #999; position: absolute; z-index:9999; } #dialog #title { background-image: url(images/pupop_bg.png); background-repeat: repeat-x; height: 28px; } #dialog #title #caption { font-family: "宋体"; font-size: 14px; color: #FFF; font-weight: bold; float: left; padding-left: 10px; margin-top: 6px; } #dialog #title #close { float: right; margin-right: 10px; height: 19px; width: 34px; background-image: url(images/pupop_bg.png); background-position: 0px -30px; } #dialog #title #close:hover { float: right; margin-right: 10px; height: 19px; width: 34px; background-image: url(images/pupop_bg.png); background-position: -37px -30px; } #dialog #content { background-color: #FFF; margin-right: 1px; margin-bottom: 1px; margin-left: 1px; height: 151px; text-align:center; } #mask { DISPLAY:block; Z-INDEX: 9998; FILTER: alpha(opacity=80); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #000; moz-opacity: 0.8; opacity: .80 }
?
JS部分(类)
function DivDialog(x,y,title,width,height,iframeSrc,closeFunction) { this.x=x; this.y=y; this.title=title; this.width=width; this.height=height; this.iframeSrc=iframeSrc; this.closeFunction=closeFunction; //初始化对话框 this.initDialog=function() { var diag=document.createElement("div"); var title=document.createElement("div"); var caption=document.createElement("div"); var clo=document.createElement("div"); var content=document.createElement("div"); var iframelogin=document.createElement("iframe"); document.body.appendChild(diag); content.appendChild(iframelogin); title.appendChild(caption); title.appendChild(clo); diag.appendChild(title); diag.appendChild(content); diag.id="dialog"; diag.style.display="none"; title.id="title"; caption.id="caption"; clo.id="close"; content.id="content"; iframelogin.id="iframelog"; iframelogin.frameborder="0"; iframelogin.scrolling="no"; iframelogin.width="100%"; iframelogin.height="100%"; iframelogin.setAttribute('frameborder','0',0); }; //设置对话框的位置 this.setDialogPos=function(x,y) { this.x=x; this.y=y; $("#dialog").css("top",y); $("#dialog").css("left",x); }; //设置对话框尺寸 this.setDialogSize=function(width,height) { this.width=width; this.height=height; $("#dialog").css("width",width); $("#dialog").css("height",height); }; //设置对话框标题 this.setDialogTitle=function(title) { this.title=title; $("#dialog #title #caption").attr("innerHTML",title); }; //设置窗体内容 this.setDialogIframeSrc=function(iframeSrc) { this.iframeSrc=iframeSrc; document.getElementById("iframelog").src=iframeSrc; }; //打开对话框 this.openDialog=function() { $("#dialog").fadeIn("normal"); }; //关闭对话框 this.closeDialog=function(closeFunction) { this.closeFunction=closeFunction; $("#dialog").fadeOut("normal",closeFunction); }; } /* * 关机效果类 */ function Mask() { //初始化 this.initMask=function() { var mask=document.createElement("div"); document.body.appendChild(mask); mask.id="mask"; this.closeMask(); }; //关闭 this.closeMask=function () { $("#mask").css("display","none"); }; //打开 this.openMask=function () { $("#mask").css("display","block"); }; } 具体使用 //窗口装载 $(document).ready(function(){ //创建对象 var diag=new DivDialog(); var mask=new Mask(); diag.initDialog(); mask.initMask(); //打开管理员 $("#adminLogin").click(function() { diag.setDialogTitle("管理员登陆"); diag.setDialogSize(300,180); diag.setDialogPos((document.body.clientWidth-diag.width)/2,180); diag.setDialogIframeSrc("login/adminlogin.jsp"); diag.openDialog(); mask.openMask(); }); //打开教师登陆对话框 $("#teacherlogin").click(function() { diag.setDialogTitle("教师登陆"); diag.setDialogSize(300,180); diag.setDialogPos((document.body.clientWidth-diag.width)/2,180); diag.setDialogIframeSrc("login/teacherlogin.html"); diag.openDialog(); mask.openMask(); }); //打开学生登陆对话框 $("#studentlogin").click(function() { diag.setDialogTitle("学生登陆"); diag.setDialogSize(300,180); diag.setDialogPos((document.body.clientWidth-diag.width)/2,180); diag.setDialogIframeSrc("login/studentlogin.html"); diag.openDialog(); mask.openMask(); }); //窗口事件 $(window).resize(function(){ diag.setDialogPos((document.body.clientWidth-diag.width)/2,180); }); //对话框关闭按钮 $("#close").click(function(){ diag.closeDialog(mask.closeMask()); }); //遮照 $("#mask").click(function(){ diag.closeDialog(mask.closeMask()); }); });
?