//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; 100%;" id="mask"><iframe scrolling="no" style="filter:alpha(opacity=0); opacity:0; 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, 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>