日期:2014-05-17 浏览次数:20874 次
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();
});
//打开教师登陆对话框
$("