点击按钮弹出可随意拖动的网页弹窗

作者:sky 点击:26 评论:0 发布时间:周一, 03/31/2014 - 19:24 所属分类:窗口特效

用户点击按钮弹出带阴影弹窗窗口，这个弹窗可随意拖动到网页任何一个位置并带有关闭功能，根据自己的需求来自定义弹窗内容。

<!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> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> <title>网页特效半透明带阴影的可拖动弹出窗口站长特效网</title> <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(); }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长c，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 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://www.zzjs.net/img/' + pic + ') no-repeat '+left+' center;'; return s; }; if(typeof Dialog.z === "undefined"){ Dialog.zIndex = 999; }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效q，本站收集大量高质量js代码，还有许多广告代码下载。 document.body.insertBefore(container,null); container.id = id; container.className = "popups"; builder.push('<div class="caption">'+me.title+'</div>'); builder.push('<form><div class="replaceable"></div>'); builder.push('<div class="submitable">'); builder.push('<a class="negative" href="javascript:void(0)">取消</a>'); builder.push('<a class="positive" href="javascript:void(0)">确认</a>'); builder.push('</div></form>'); builder.push('<a class="closebtn" href="javascript:void(0)"></a>'); 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; } }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下c载。 //设置样式 me.css(".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;height:20px;'+ '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;width:28px; '+ 'height:17px;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%;height:40px;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("<object classid=CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E id=VMLRender>"), head = document.getElementsByTagName("head")[0]; head.appendChild(vmlobj); document.createStyleSheet().addRule(".vml", "behavior: url(#VMLRender); display:inline-block;"); } var rect = document.createElement('<vml:roundrect class="vml">'); container.insertBefore(rect,container.firstChild); rect.style.cssText = "position:absolute;top:0px;left:0px;width:"+width+"px;height:"+height+"px;"; me.attr(rect,{arcsize:5 /Math.min(width, height),stroked:"f"}); rect.innerHTML = '<vml:fill class="vml" opacity="0.8" color="#68DFFB" />' + '<vml:shadow class="vml" on="t" color="#333" opacity="0.2" offset="10px,10px" />' }else{ var svg = me.createSVG("svg"); container.insertBefore(svg,container.firstChild); me.attr(svg,{width:me.width+10+"px",height:me.height+10+"px"}); var defs = me.createSVG("defs"); svg.appendChild(defs); var filter = me.createSVG("filter"); defs.appendChild(filter); me.attr(filter,{id:"filter"+id}); var feGaussianBlur = me.createSVG("feGaussianBlur"); filter.appendChild(feGaussianBlur) me.attr(feGaussianBlur,{"in":"SourceAlpha",result:"blur-out",stdDeviation:1.5}); var feOffset = me.createSVG("feOffset"); filter.appendChild(feOffset) me.attr(feOffset,{"in":"blur-out",result:"the-shadow",dx:0,dy:2}); var feBlend = me.createSVG("feBlend"); filter.appendChild(feBlend) me.attr(feBlend,{"in":"SourceGraphic","in2":"the-shadow",mode:"normal"}); var shadow = me.createSVG("rect"); svg.appendChild(shadow); me.attr(shadow,{x:"10px",y:"10px",width:me.width+"px",height:me.height+"px",rx:10, fill:"#333",style:"opacity:0.2",filter:"url(#filter"+id+")"}); var rect = me.createSVG("rect"); svg.appendChild(rect); me.attr(rect,{width:me.width+"px",height:me.height+"px",rx:5,fill:"#68DFFB",style:"opacity:0.8"}); } //***************************IE6 弹出窗口中遮不住select****************************** if(me.ie6){ me.iframe = document.createElement("<iframe style='position:absolute;left:"+ me.left+"px;top:"+me.top+"px;width:"+(me.width+10)+"px;height:"+ (me.height+10)+"px;z-index:"+(Dialog.zIndex-2)+";filter:mask();display:none;' ></iframe>"); container.insertAdjacentElement('beforeBegin',me.iframe); } //*****************************监听点击************************** container.onclick = function(){ var ee = me.getEvent(), node = ee[1],tag = ee[2]; if(tag == "a" ){ switch(node.className){ case "closebtn" : me.www_zzjs_net(); break; case "positive" : me.www_zzjs_net(); //form.submit(); break; case "negative" : alert("您点击了取消按钮！"); break; } } }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，c本站收集大量高质量js代码，还有许多广告代码下载。 container.onmousedown = function(e){ e = e || window.event; container.offset_x = e.clientX - container.offsetLeft; container.offset_y = e.clientY - container.offsetTop; document.onmousemove = function(e){ me.drag(e,me) } document.onmouseup = function(){ me.dragend(container) } } }, drag:function(e,me){ e = e || window.event;//获得事件对象 var el = me.container; var l = e.clientX - el.offset_x + "px", t = e.clientY - el.offset_y + "px"; with(el.style){ left=l; top=t; cursor="move" } if(me.ie6){ with(me.iframe.style){ left=l; top=t; } }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站q收集大量高质量js代码，还有许多广告代码下载。 !+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges(); }, dragend:function(el){ el.style.cursor = ""; document.onmouseup = document.onmousemove = null; }, www_zzjs_net : function(){ this.container.style.display = "none" ; if(this.ie6){ this.iframe.style.display = "none"; } this.mode(0,0); //下面两行目的是生成html,body{width:auto;height:auto;overflow:auto;} this.incss(document.body, {width:"auto",height:"auto",overflow:"auto"}); this.incss(document.documentElement, {width:"auto",height:"auto",overflow:"auto"}); }, show : function(){ this.container.style.display = "block" ; if(this.ie6){ this.iframe.style.display = "block"; } var size = this.getBrowserWindowSize(); this.mode(size.width, size.height); }, getBrowserWindowSize :function(){ var de = document.documentElement; return { width: (de.clientWidth || document.body.clientWidth), height:(de.clientHeight || document.body.clientHeight) } }, createSVG : function(tag){ return document.createElementNS("http://www.w3.org/2000/svg",tag); }, attr: function(node,bag){ for(var i in bag){ if(bag.hasOwnProperty(i)) node.setAttribute(i,bag[i]) } }, getEvent : function(e) { e = e || window.event; if (!e) { var c = this.getEvent.caller; while (c) { e = c.arguments[0]; if (e && (Event == e.constructor || MouseEvent == e.constructor)) { break; } c = c.caller; } } var target = e.srcElement ? e.srcElement : e.target, currentN = target.nodeName.toLowerCase(), parentN = target.parentNode.nodeName.toLowerCase(), grandN = target.parentNode.parentNode.nodeName.toLowerCase(); return [e,target,currentN,parentN,grandN]; }, mode:function(w,h){ var mask = Dialog.mask,me = this; this.incss(document.body, {width:"100%",height:"100%",overflow:"hidden"}); this.incss(document.documentElement, {width:"100%",height:"100%",overflow:"hidden"}); this.incss(mask,{position:"absolute",background:"#fff",top:0,left:0, width:w +"px",height:h +"px","-moz-user-select":"none"}); !+"\v1"? (mask.style.filter = "alpha(opacity=0)") : (mask.style.opacity = "0"); mask.onselectstart = function(e){ me.stopEvent(e); } mask.oncontextmenu = function(e){ me.stopEvent(e); } }, stopEvent:function(e){ e = e || window.event; if(e.preventDefault) { e.preventDefault(); e.stopPropagation(); }else{ e.returnValue = false; e.cancelBubble = true; } }, incss:function(node,bag){ var str = ";" for(var i in bag){ if(bag.hasOwnProperty(i)) str += i+":"+bag[i]+";" } node.style.cssText = str; }, css:function(selector,declaration){ if(typeof document.createStyleSheet === 'undefined') { document.createStyleSheet = (function() { function createStyleSheet() { var element = document.createElement('style'); element.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(element); var sheet = document.styleSheets[document.styleSheets.length - 1]; if(typeof sheet.addRule === 'undefined') sheet.addRule = function(selectorText, cssText, index) { if(typeof index === 'undefined') index = this.cssRules.length; this.insertRule(selectorText + ' {' + cssText + '}', index); }; return sheet; } return createStyleSheet; })(); }//欢迎来到站长特效网，x我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 if(!!Dialog.sheet){ if(!Dialog.memory.exists(selector,declaration)){ Dialog.memory.set(selector,declaration); Dialog.sheet.addRule(selector,declaration); } }else{ Dialog.sheet = document.createStyleSheet(); var memory = function(){ var keys = [],values = [],size = 0; return { get : function(k){ var results = []; for(var i=0,l=keys.length;i<l;i++){ if(keys[i] == k){ results.push(values[i]) } } return results; }, exists:function(k,v){ var vs = this.get(k); for(var i=0,l=vs.length;i<l;i++){ if(vs[i] == v) return true; } return false; }, set : function(k,v){ keys.push(k); values.push(v); size++; }, length :function(){ return size; } } } Dialog.memory = memory(); Dialog.memory.set(selector,declaration); Dialog.sheet.addRule(selector,declaration); Dialog.mask = document.createElement("div"); document.body.insertBefore(Dialog.mask,this.container); } } }; window.onload = function(){ var dialog1,dialog2,dialog3 setTimeout(function(){ //定时器是为了能在我运行框中正常运行，项目中没有必须放到里面去！ dialog1 = new Dialog({width:400,height:300,title:"站长特效网"}); dialog1.www_zzjs_net(); dialog2 = new Dialog({width:400,height:300,title:"站长特效网"}); dialog2.www_zzjs_net(); dialog3 = new Dialog({width:400,height:300,title:"站长特效网"}); dialog3.www_zzjs_net(); },0) var bn1 = document.getElementById("zzjs_net_1"), bn2 = document.getElementById("zzjs_net_2"), bn3 = document.getElementById("zzjs_net_3"); bn1.onclick = function(){ dialog1.show(); dialog1.content.innerHTML = "<table width="+(dialog1.width-26)+" height="+ (dialog1.height-56)+"><tr><td style='text-align:center;'><a href='http://zzjs.net'>站长特效网</a>，打造国内最帅的网页特效站！</td></tr></table>" }//欢d迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 bn2.onclick = function(){ dialog2.show(); dialog2.content.innerHTML = "<iframe frameborder=0 src='http://www.zzjs.net/' width="+(dialog2.width-26)+" height="+ (dialog2.height-96)+"></iframe>" }; bn3.onclick = function(){ dialog3.show(); dialog3.content.innerHTML = "<table width="+(dialog3.width-26)+" height="+ (dialog3.height-96)+"><tr><td style='text-align:center;'>" + document.getElementById("www_zzjs_net").innerHTML + "</td></tr></table>" } }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 </script> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <button id="zzjs_net_1">弹出窗口1</button> <button id="zzjs_net_2">弹出窗口2（带iframe）</button> <button id="zzjs_net_3">弹出窗口3（引用本页的隐藏层）</button> <div style="display:none" id="www_zzjs_net"> <center style="padding:1em;font-weight:700">用户登陆</center> <p> <label for="username">用户名</label> <input type="text" name="username" id="username" /> </p> <p> <label for="password">密　码</label> <input type="password" name="password" id="password" /> </p> </div> </body> </html>

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

顶一下

(0)

100%

踩一下

(0)

100%

标签: