js超漂亮弹出层，带阴影效果

提示：您可以先修改部分代码再运行

<title>一步步教你实现弹出窗口 by 司徒正美</title> <meta charset="utf-8"> <meta name="keywords" content="一步步教你实现弹出窗口 by 司徒正美"> <meta name="description" content="一步步教你实现弹出窗口 by 司徒正美"> <script type="text/javascript"> var Dialog = function(){ var options = arguments[0] || {}; this.title = options.title || "新窗口", this.width = options.width || 400, this.height = options.height || 300, this.container = document.createElement("div"), this.id = "id" + Math.abs(new Date() * Math.random()).toFixed(0); this.init(); } Dialog.prototype = { constructor: Dialog, init: function() { var me = this,container = me.container,width = me.width, height = me.height, id = me.id,builder = [],t = "getElementsByTagName", bg = function(pic){ var bgcolor = arguments[1] || 'transparent', left = arguments[2] || 'left', s = 'background:'+bgcolor + ' url(http://images.**c*nblogs.com/cnblogs_com/rubylouvre/205314/' + pic + ') no-repeat '+left+' center;'; return s; }; if(typeof Dialog.z === "undefined"){ Dialog.zIndex = 999; } document.body.insertBefore(container,null); container.id = id; container.className = "popups"; builder.push('<div class="caption">'+me.title+''); builder.push('<form><div class="replaceable">'); builder.push('<div class="submitable">'); builder.push('<a class="negative" href="javascript:void(0)">取消'); builder.push('<a class="positive" href="javascript:void(0)">确认'); builder.push('</script>

'); builder.push(''); container.innerHTML = builder.join(''); var size = me.getBrowserWindowSize(); me.left = ((size.width - width)/2) >> 0; me.top = ((size.height - height)/2) >> 0; me.ie6 = /msie|MSIE 6/.test(navigator.userAgent); var divs = container[t]("div"),k = divs.length; while (--k >= 0) { if(divs[k].className == "replaceable"){ me.content = divs[k] break; } } //设置样式 me.(".popups","position:absolute;width:"+width+"px;height:"+ height+"px;left:"+me.left+"px;top:"+me.top+"px;");//background:#68DFFB container.style.zIndex = Dialog.zIndex++; me.css(".popups .caption",'position:absolute;top:10px;left:10px;width:'+(width-50)+'px;'+ 'padding-left:30px;font:700 14px/20px "SimSun","Times New Roman";color: #fff;'+ bg("o_icon.gif","#68DFFB","5px")); me.css(".popups .closebtn",'position:absolute;top:0;right:10px;display:block; '+ 'text-decoration:none;'+ bg("o_dialog_closebtn.gif")); me.css(".popups a.closebtn:hover",bg("o_dialog_closebtn_over.gif")); me.css(".popups form","position:absolute;top:30px;left:10px;border:3px solid #68DFFB;width:"+(width-26)+"px;height:"+(height-51)+"px;background:#fff;"); me.css(".popups .submitable","position:absolute;bottom:0;border-top:1px solid #c0c0c0;width:100%;background:#f9f9f9;"); var buttoncss = 'display:block;float:right;margin: 0.7em 0.5em;padding:2px 7px;border:1px solid #dedede;' + 'background:#f5f5f5;color:#a9ea00;font:700 12px/130% "SimSun","Times New Roman";text-decoration:none;'; me.css("a.positive",buttoncss);//IE6有bug，不能动态创建联合选择器 me.css("a.negative",buttoncss); me.css("a.negative","color:#ff5e00;"); me.css("a.positive:hover","border:1px solid #E6EFC2;background:#E6EFC2;color:#529214;"); me.css("a.negative:hover","border:1px solid #fbe3e4;background:#fbe3e4;color:#d12f19;"); me.css("a.positive:active","border:1px solid #529214;background:#529214;color:#fff;"); me.css("a.negative:active","border:1px solid #d12f19;background:#d12f19;color:#fff;"); me.css("a","outline: 0;"); //按钮的圆角 var ff = /a/[-1]=='a'; if(ff){ me.css("a.positive","-moz-border-radius:4px;"); me.css("a.negative","-moz-border-radius:4px;"); }else{ me.css("a.positive","-webkit-border-radius:4px;"); me.css("a.negative","-webkit-border-radius:4px;"); } //*************************** if (!+"v1" ){ if(!document.namespaces.vml){ document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml'); var vmlobj = document.createElement("