一步步教你实现弹出窗口（第3部分）

最新推荐文章于 2023-09-11 10:46:29 发布

cheng5128

最新推荐文章于 2023-09-11 10:46:29 发布

阅读量2k

点赞数

文章标签： function dialog filter class iframe border

本文链接：https://blog.csdn.net/cheng5128/article/details/4695779

版权

这部分的内容是绑定事件，模拟模态窗口与拖动。先从最简单的说起，弹出窗口现在有三个按钮，反正都是点击事件，我们可以利用事件代理以节省侦听器。侦听器放在顶层容器中就是，然后我们再判定冒泡上来的事件的源对象的标签是否为a元素，再根据其类名添加相应的事件。


      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;
          }
        }
      }

其中me即为this，Dialog类的实例，因为就这样简单把this暴露在绑定函数中，它对应的是container这个顶层容器，而不是实例。hide方法的功能很简单，隐藏顶层容器。getEvent方法的具体代码可参见我的另一篇博文，用来快捷取得事件，事件源对象以及源对象的标签名。到此，绑定事件部分讲完了。

再看拖放，我以前有两篇博文专门说这问题，可参见这里与这里。现在扼要演实一下如何运用。首先在init()主方法中添加如下代码：


      container.onmousedown = function(e){
        e = e || event;
        container.offset_x = e.clientX - container.offsetLeft;
        container.offset_y = e.clientY - container.offsetTop;
        document.onmousemove = function(e){
          me.drag(e,container)
        }
        document.onmouseup = function(){
          me.dragend(container)
        }
      }

然后再添加两个原型方法，分别为drag与dragend。


    drag:function(e,el){
      e = e || event;//获得事件对象
      var l = e.clientX - el.offset_x  + "px",
      t = e.clientY - el.offset_y  + "px";
      this.incss(el, {cursor:"move",left:l,top:t})
        !+"/v1"? document.selection.empty() : window.getSelection().removeAllRanges();
    },
    dragend:function(el){
      el.style.cursor = "";
      document.onmouseup = document.onmousemove = null;
    },

因为我原来的动态添加样式规则方法css名副其实，就是动态添加，不具备修改能力，因此对于在拖动中频繁修改的CSS属性就无能为力了，于是我又用回内联样式。它的代码很简单，以前我也多次演示过这东西。


    incss:function(node,bag){
      var str = ";"
      for(var i in bag){
        if(bag.hasOwnProperty(i))
          str += i+":"+bag[i]+";"
      }
      node.style.cssText = str;
    },

如果IE6死掉是多么美好了，基本上就是这样简单。我们在IE6中拖啊拖，遇到select标签了！为了掩住了它，我们需要一个iframe标签，并把它放到顶层容器之前（它与顶层容器是兄弟节点）。由于我们的弹出窗口是有阴影的，因此iframe的大小应该为弹出窗口加阴影的大小，并且其z-index比它顶层容器一点。


      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:1;display:none;filter:mask()' ></iframe>");
        container.insertAdjacentElement('beforeBegin',me.iframe);
      }

在拖动窗口时也拖动iframe。


    drag:function(e,me){
      e = e || event;//获得事件对象
      var el = me.container,
      l = e.clientX - el.offset_x  + "px",
      t = e.clientY - el.offset_y  + "px";
      this.incss(el, {cursor:"move",left:l,top:t})
      if(this.ie6){
        with(me.iframe.style){//当用cssText设置iframe的样式时，其display变为inline，就无法掩住select
          left=l;                   //另，当设置iframe的allowTransparency="true" ，也不能掩住select
          top=t;
        }
      }
        !+"/v1"? document.selection.empty() : window.getSelection().removeAllRanges();
    },

最看模态窗口的实现。现在所有浏览器都支持showModeDialog方法了，即使是火狐。但在首次使用此方法，IE会有提示是否允许执行。若用户以前做够了弹出广告的骚扰，我们再用这方法来实现，恐怕就行不通了。因此我是使用纯DIV来模拟。首先是冻结窗口，把可视区外部分隐藏掉，阻止滚动条出现。其次阻止弹出窗口外的其他部分的右键事件与选择事件。


    mode:function(w,h){
      var mask = Dialog.mask,me = this;
      //IE6的addRule方法存在bug，不支持联合选择器，即html,body{*********}这种形式，只好分开写！
      this.css("html","margin:0;border:0;width:100%;height:100%;overflow:hidden;");
      this.css("body","margin:0;border:0;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);
      }
    },

mode方法我们在show与hide中调用。


    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);
    },

stopEvent方法是用来阻止事件冒泡与浏览器的默认事件，一个非常常用的方法。


    stopEvent:function(e){
      e = e || window.event;
      if(e.preventDefault) {
        e.preventDefault();
        e.stopPropagation();
      }else{
        e.returnValue = false;
        e.cancelBubble = true;
      }
    },

<!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('<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;
        }
      }

//设置样式
      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);
      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) {
      var 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 dialog;
    setTimeout(function(){ //定时器是为了能在我运行框中正常运行，项目中没有必须放到里面去！

dialog = new Dialog({width:400,height:300,title:"司徒正美"});
      dialog.hide();
      
    },0)
    var bn = document.getElementById("test");
    bn.onclick = function(){    
      
      dialog.show();
      dialog.content.innerHTML = "弹出窗口中间的部分可以用dialog.content.innerHTML重写!"
    }
  }
</script>
<h2 style="text-align:center">一步步教你实现弹出窗口 by 司徒正美</h2>

<div id="parent"></div><strong id="child" >样式规则</strong>
<p style="color:red">在chrome中好像没办法用width:100%,height:100%,overflow:hidden冻结窗口，只能隐藏滚动条。</p>
<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>

<button id="test">测试</button>
<div id="multi"></div>
<p>http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/</p>
<p>https://developer.mozilla.org/cn/Canvas_tutorial</p>
<p>http://www.btinternet.com/~st_rise/main/mainfram.htm?../webplus/vml/vfill.htm</p>
http://www.svgbasics.com/filters3.html
ar callerFunc = arguments.callee.caller.toString();
callerFuncName = (callerFunc.substring(callerFunc.indexOf("function") + 8, callerFunc.indexOf("(")) || "anoynmous")
<pre>
  <p>通过正则表达式将查询字符串转化为对象</p>
function getQuery(s){
  var arr = s.split('?');
  var param = arr[1].split('&');
  var obj = {};
  for(var i =0 ; i<param.length; i++){
    var p = param[i].split('=');
    obj[p[0]] = p[1];
  }
  return obj;
}
  </pre>

var divs = container[t]("div"),k = divs.length;
      while (--k >= 0) {
        if(divs[k].className == "replaceable"){
          me.content = divs[k]
          break;
        }
      }

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"});

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)

<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，无模糊，我们可以使用下面的代码：

<button id="test1">弹出窗口1</button>
<button id="test2">弹出窗口2（带iframe）</button>
<button id="test3">弹出窗口3（引用本页的隐藏层）</button>
<p style="padding:1em;color:#a9ea00">由于window.onload在运行框内（用window.open("","","")实现）中失效了，于是无法判断窗口的大小，从而无法实现居中对齐。在标准浏览器还有补救措施，在IE则彻彻底底败给它了。放心，Dialog类完全没问题，有问题的是运行框。</p>
<div style="display:none" id="hide">

基本上是这样，300多行，为了兼容Opera的圆角与阴影，有30多行分配给它，为了修正IE6的select bug，有10行分配给它，为了让标准浏览器拥有IE风格的设置样式规则的方法，又要20行。其他的兼容代码估计也有二十行左右。因此浏览器这东西还是一家独大好了。我这个弹出窗口其实还有许多改进之处，如把圆角半透明边框独立出来，作为一个接口，那个动态添加样式的也可以再扩展一下，独立出来，做成另一个接口，再把模态化与拖动独立出来，然后像mootools那样实现类好了，超优雅。

下载