//filter: alpha(opacity=50);IE滤镜
//opacity: 0.2;非IE滤镜
var dlg = {
element: function () {
this._strTit = "标题";
this._strCon = "内容";
this._width = 350;
this._height = 200;
this._obj = $('<div class="dlg_box">');
this._title = $('<h1 class="dlg_title"></h1>');
this._content = $('<div class="dlg_content"></div>');
this._txt = $('<span class="dlg_txt">确定删除该相册？该相册中有15张相片</span>');
this._bottom = $('<div class="dlg_bottom"></div>');
this._mask = $('<div style="position:fixed; _position:absolute; display:none; top:0px; left:0px; _top:expression(eval(document.documentElement.scrollTop)); _left:expression(eval(document.documentElement.scrollLeft)); background:#000; z-index:999; filter:alpha(opacity=20); opacity:0.2; width:100%;" id="mask"><iframe scrolling="no" style="filter:alpha(opacity=0); opacity:0; width:100%; height:100%; display:none; *display:block; " ></iframe></div>');
this.fn1 = function () { };
this.fn2 = function () { };
},
icon: function (cla) {
return $('<i></i>').attr("class", cla);
},
btn: function (obj, mask, cla, txt, fn, g) {
return $('<a href="javascript:;"></a>').attr({ "class": cla, "txt": txt }).html(txt).on("click", function () { fn(); if (g == true) { } });
},
Box: {
Inf: function (id, title, content, width, fn1, fn2) {
var e = new dlg.element();
$.extend(e, { _strTit: title, _strCon: content, _width: width, fn1: fn1, fn2: fn2 });
e._title.html(title);
e._content.html(content);
e._obj.append(e._title).append(e._content).attr("id", id);
e._obj.append(dlg.btn(e._obj, e._mask, "close", "关闭", e.fn2, true));
e._bottom.append(dlg.btn(e._obj, e._mask, "btn_yes", "确定", e.fn1, true));
e._bottom.append(dlg.btn(e._obj, e._mask, "btn_no", "取消", e.fn2, true));
e._obj.append(e._bottom);
e._obj.css({ "width": e._width, "height": e._height });
e._mask.attr("id", id + "Mask");
this.ply(e._obj, e._mask);
this.drgn(e._obj, e._title);
},
ply: function (obj, mask) {
$("body").append(mask).append(obj);
mask.height($(window).height());
var t = ($(window).height() - obj.height()) / 2; //设top为变量X 得到公式：2X+ $(obj).height()=$(window).height()=>x=($(window).height()-$(obj).height())/2
var l = ($(window).width() - obj.width()) / 2;
obj.attr("style", 'position:absolute;z-index:1000;');
obj.css({ "top": t, "left": l });
obj.show();
mask.show();
//绑定窗口改变事件
$(window).bind("resize", function () {
var t = ($(window).height() - obj.height()) / 2;
var l = ($(window).width() - obj.width()) / 2;
obj.css({ "top": t, "left": l });
mask.css({ "height": $(window).height(), "width": $(window).width() });
})
},
drgn: function (obj, head) {
var moveObj = $("<div class='dlg_dashed'></div>");
var d_x, d_y = 0;
head.on("mousedown", function (e) {
moveObj.css({ "width": obj.width(), "height": obj.height(), "left": obj.offset().left, "top": obj.offset().top, "position": "absolute" });
moveObj.appendTo("body");
e = e || window.event;
d_x = e.clientX - obj.offset().left; //光标距离弹出框左边距距离
d_y = e.clientY - obj.offset().top; //光标距离弹出框上边距距离
if (document.body.setCapture) {
document.body.onmousemove = move;
document.body.onmouseup = end;
document.body.setCapture();
} else {
document.addEventListener("mousemove", move, false);
document.addEventListener("mouseup", end, false)
}
});
var move = function (e) {
e = e || window.event;
var l = e.clientX - d_x;
var t = e.clientY - d_y;
moveObj.css({ "left": l + "px", "top": t + "px" });
};
var end = function (e) {
moveObj.remove();
if (document.body.setCapture) {
document.body.onmousemove = null;
document.body.onmouseup = null;
document.body.releaseCapture();
}
obj.css({ "left": moveObj.css("left"), "top": moveObj.css("top") });
document.removeEventListener("mousemove", move, false);
document.removeEventListener("mouseup", move, false);
}
},
Close: function (id, fn1) {
$(window).unbind("resize");
$("#" + id).remove();
$("#" + id + "Mask").remove();
}
},
Msg: {
Inf: function () {
},
Err: function () {
}
}
};
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="dl1g.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.dlg_box a.close, .btn_yes, .btn_no, .dlg_box a.close, .btn_yes, .btn_no, .dlg_box .ico_ques
{
background: url(image/pop_bg.png) no-repeat;
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
/*框*/
.dlg_box
{
border: solid 3px #aaa;
position: absolute;
background-color: White;
left: 0px;
top: 0px;
z-index: 999;
overflow: hidden;
width: 350px;
}
/*标题*/
.dlg_box .dlg_title
{
background-color: #E0E0E0;
font-size: 14px;
font-weight: bold;
padding: 0px 0px 0px 10px;
height: 30px;
line-height: 30px;
border-top: white solid 1px;
border-bottom: #BBBBBB solid 1px;
margin: 0px 0px 0px 0px;
cursor: move;
}
/**内容**/
.dlg_box .dlg_content
{
margin: 10px 20px;
min-height: 40px;
line-height: 20px;
font-weight: bold;
color: #404040;
font-size: 14px;
}
/**图标**/
.dlg_box .ico_ques
{
background-position: -50px -60px;
width: 25px;
height: 25px;
margin-right: 10px;
}
/**按钮**/
.dlg_box .dlg_bottom
{
height: 30px;
text-align: center;
margin-bottom: 20px;
}
.btn_yes, .btn_no
{
text-decoration: none;
width: 79px;
height: 30px;
line-height: 30px;
color: white;
font-weight: bold;
}
.btn_no
{
background-position: -79px 0px;
margin-left: 25px;
color: #404040;
}
.btn_yes:hover
{
background-position: 0px -30px;
}
.btn_no:hover
{
background-position: -79px -30px;
}
.dlg_box a.close
{
height: 24px;
width: 24px;
background-position: -158px 0;
display: block;
position: absolute;
top: 3px;
right: 3px;
text-indent: -1000px;
}
.dlg_box a.close:hover
{
background-position: -158px -24px;
}
.dlg_dashed
{
border: dashed 3px #AAAAAA;
background: #fff;
z-index: 1005;
filter: alpha(opacity=50);
opacity: 0.5;
}
</style>
</head>
<body>
<!-- <div class="dlg_box" style="top: 10.5px; left: 499.5px; display: block;">
<h1 class="dlg_title">
删除相册
</h1>
<div class="dlg_content">
<i class="ico_ques"></i><span class="dlg_txt">确定删除该相册？该相册中有15张相片</span>
</div>
<div class="dlg_bottom">
<a href="javascript:;" class="btn_yes" title="确定">确定</a><a href="javascript:;" class="btn_no"
title="取消">取消</a>
</div>
<a href="javascript:;" class="close" title="关闭">关闭</a>
</div>-->
<a id="btndlg" href="javascript:;">弹出</a>
<div id="lg">
</div>
</body>
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../js/jone.js" type="text/javascript"></script>
<script src="dlg.js" type="text/javascript"></script>
<script type="text/javascript">
$("#btndlg").bind("click", function () {
dlg.Box.Inf("box1", "", '', 350,
function () { },
function () { dlg.Box.Close("box1", function () { }); });
});
</script>
</html>
