原创：Div+CSS+JS的对话框（使用了JQuery）
CSS部分
/*--------div对话框-----------*/
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()); }); });?