教程集 > 脚本编程 > javascript > 正文 js超漂亮弹出层，带阴影效果

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

发布时间：2023-05-29 编辑：jiaochengji.com

教程集为您提供js超漂亮弹出层，带阴影效果等资源，欢迎您收藏本站，我们将为您提供最新的js超漂亮弹出层，带阴影效果资源

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

<!doctype html>  <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.cnblogs.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 '</div>');        builder.push('<form><div class="replaceable"></div>');        builder.push('<div class="submitable">');        builder.push('取消');        builder.push('确认');        builder.push('</div></form>');        builder.push('</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;          }        }        //设置样式        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.hide();                break;              case "positive" :                me.hide();                //form.submit();                break;              case "negative" :                alert("你点击了取消按钮!");                break;            }          }        }        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;          }        }          ! "v1"? document.selection.empty() : window.getSelection().removeAllRanges();      },      dragend:function(el){        el.style.cursor = "";        document.onmouseup = document.onmousemove = null;      },      hide : 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;          })();        }        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.hide();        dialog2 = new Dialog({width:400,height:300,title:"司徒正美"});        dialog2.hide();        dialog3 = new Dialog({width:400,height:300,title:"司徒正美"});        dialog3.hide();      },0)      var bn1 = document.getElementById("test1"),      bn2 = document.getElementById("test2"),      bn3 = document.getElementById("test3");      bn1.onclick = function(){        dialog1.show();        dialog1.content.innerHTML = "<table width=" (dialog1.width-26) " height="           (dialog1.height-56) "><tr><td style='text-align:center;'>文字居中</td></tr></table>"      }      bn2.onclick = function(){        dialog2.show();        dialog2.content.innerHTML = "<iframe frameborder=0 src='http://www.csszengarden.com/' 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("hide").innerHTML            "</td></tr></table>"      }    }  </script>  <h2 style="text-align:center">一步步教你实现弹出窗口 by 司徒正美</h2>  <pre>  #navigation {  -webkit-box-shadow: 0 0 10px #000;  -moz-box-shadow: 0 0 10px #000;  }  #navigation li a:hover,  #navigation li a:focus {  -webkit-box-shadow: 0 0 5px #111;  -moz-box-shadow: 0 0 5px #111;  }  box-shadow属性可以用多个值：水平偏移、垂直偏移、模糊半径、伸展半径和阴影颜色。水平和垂直偏移和阴影色使用的最多。  在一个div上应用红色阴影，右边和下边偏移4px，无模糊，我们可以使用下面的代码：  div {     -moz-box-shadow: 4px 4px 0 #f00;     -webkit-box-shadow: 4px 4px 0 #f00;     box-shadow: 4px 4px 0 #f00;     }  </pre>  <select name="select1">    <option>不要挡住我，不要挡住我</option>    <option>不要挡住我，不要挡住我</option>    <option>不要挡住我，不要挡住我</option>  </select>  <select name="select1">    <option>不要挡住我，不要挡住我</option>    <option>不要挡住我，不要挡住我</option>    <option>不要挡住我，不要挡住我</option>  </select>  <p>我的博客:http://www.cnblogs.com/rubylouvre/</p>  <button id="test1">弹出窗口1</button>  <button id="test2">弹出窗口2（带iframe）</button>  <button id="test3">弹出窗口3（引用本页的隐藏层）</button>  <div style="display:none" id="hide">    <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>

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

您可能感兴趣的文章：
jQuery信息提示插件 Dynamic tooltip
photoshop制作漂亮立体的胶卷ICON图标教程
 Illustrator网格工具绘制漂亮的北极光效果教程
 Photoshop设计逼真漂亮雪景制作教程
 漂亮的jquery提示效果(仿腾讯弹出层)
css div 边框阴影
 photoshop制作出漂亮花朵教程
 photoshop制作逼真的弥散阴影效果教程
 Photoshop利用滤镜制作漂亮绚丽烟花教程
 photoshop制作漂亮心形云彩教程

上一篇：js 全选代码下一篇：js 给table增加下拉滚动条

[关闭]

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

最近更新

浏览排行