分享我自己写的js MessageBox 类！弹出层（支持弹出原页面的div），消息框，模拟alert confirm

MessageBox.js/** 
**   功能：弹出消息框类，背景渐变到半透明，还可以只弹出半透明层
**   作者：胡成洪
**   日期：2010-06-10
**/
function __messageBox()
{
    var isIe=!!document.all;
    var obj = this;
    var backDiv = null;
    var messageDiv = null;
   window._msgZindex = window._msgZindex || 200000;
    //弹出提示框
    this.showMessageBox=function (wTitle,content,wWidth,type,confirmFun,cancelFun)
    {
        type = type||0;
        obj.showBackgroundDiv();
      if(typeof(content)=='string'){
            messageDiv=document.createElement("div");
            messageDiv.className="mesWindow";
            var html = "<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button'  class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' >"+content+"</div>";
            if(type>0){html+="<div class='mesWindowBottom'><a href='javascript:void(0)'>确 定</a>"; if(type>1){html+="&nbsp;&nbsp;&nbsp;<a href='javascript:void(0)'>取 消</a>";} html+="</div>"; }
            html+="<div class='clear'></div>";
            messageDiv.innerHTML=html;
            styleStr="left:"+(obj.getClientWidth()- wWidth)/2+"px;position:absolute;width:"+wWidth+"px;z-index:"+window._msgZindex++ +";top:" +((obj.getClientHeight()-100)/2+obj.getScrollTop()) +'px';
            messageDiv.style.cssText=styleStr;
             document.body.appendChild(messageDiv);
            setTimeout(function(){
                var divList =messageDiv.getElementsByTagName('div') ;
                divList[0].getElementsByTagName('input')[0].onclick=function(){obj.closeWindow();if(type>1 && cancelFun && cancelFun !=null)cancelFun();};
                if(type>0){ 
                    var aList= divList[divList.length-2].getElementsByTagName('a');
                    aList[0].onclick=function(){obj.closeWindow();if(confirmFun && confirmFun !=null)confirmFun();};
                    if(type>1){ aList[1].onclick=function(){obj.closeWindow();if(cancelFun && cancelFun !=null)cancelFun();};}
                 }
            },50);
     }else {
          messageDiv=content;isHide = true;
          messageDiv.style.position="absolute";
          messageDiv.style.zIndex=window._msgZindex++ ;
          messageDiv.style.display="block";
          obj.setDivSize();
          if(isIe){
               var slcList = messageDiv.getElementsByTagName('select');
                for(var i=0;i<slcList.length;i++)
                {
                    slcList[i].style.visibility="";
                }
            }
      }   
    };
    this.setDivSize=function(){
        if(backDiv!=null)
        {
            backDiv.style.width = document.documentElement.scrollWidth ;
            backDiv.style.height=document.documentElement.scrollHeight;
        }
        if(messageDiv!=null){
             messageDiv.style.top=(( obj.getClientHeight() -  messageDiv.offsetHeight)/2 + obj.getScrollTop()) +'px';
             messageDiv.style.left=(( obj.getClientWidth() -  messageDiv.offsetWidth)/2 ) +'px'; 
         }
    }
    this.setMessageBoxTop=function(p)
    {
        if(messageDiv==null){return;}
        var toTop =toTop = ( obj.getClientHeight() -  messageDiv.offsetHeight)/2 + obj.getScrollTop();
    var top = parseInt( messageDiv.style.top);
    if(top< toTop - p/2 )
    {   
        top+=p;
    messageDiv.style.top = (top) +'px';
    setTimeout(function(){obj.setMessageBoxTop(p);},2);
    }else if(top>toTop +p/2 ){
     top-=p;
    messageDiv.style.top = (top) +'px';
    setTimeout(function(){obj.setMessageBoxTop(p);},2);
    }else{
            messageDiv.style.top = (toTop) +'px';
        }
    };
    //让背景渐渐变暗
     this.showBackground=function(objDiv,endInt)
    {
        if(isIe)
        {
            objDiv.filters.alpha.opacity+=5;
            if(objDiv.filters.alpha.opacity<endInt)
            {
                setTimeout(function(){obj.showBackground(objDiv,endInt)},5);
            }
        }else{
            var al=parseFloat(objDiv.style.opacity);al+=0.05;
            objDiv.style.opacity=al;
            if(al<(endInt/100))
            {setTimeout(function(){obj.showBackground(objDiv,endInt)},5);}
        }
    };
    //显示全屏的一个半透明div
     this.showBackgroundDiv=function()
    {
      if(isIe){ obj.setSelectState('hidden');}
        backDiv =document.createElement("div");
        var bWidth=parseInt(document.documentElement.scrollWidth);
        var bHeight=parseInt(document.documentElement.scrollHeight);
        var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;z-index:"+window._msgZindex++ ;
        styleStr+=(isIe)?";filter:alpha(opacity=0);":";opacity:0;";
        backDiv.style.cssText=styleStr;
        document.body.appendChild(backDiv);
        obj.showBackground(backDiv,50);
    };
    //关闭窗口 是否隐藏div 不隐藏就删除
     this.closeWindow=function(isHide)
    {
        if(backDiv!=null)
        {
            backDiv.parentNode.removeChild(backDiv);
            backDiv = null;
            if(isIe){
                 obj.setSelectState('');
            }
        }
        if(messageDiv!=null)
        {   if(isHide)
            {
                 messageDiv.style.display="none";
            }else{
                messageDiv.parentNode.removeChild(messageDiv);
                messageDiv = null;
            }
        }
     };
    
    
      if(window.addEventListener){
           window.addEventListener('scroll', function(e){ obj.setMessageBoxTop(1); },false); 
            window.addEventListener('resize', function(e){obj.setDivSize();  },false); 
        }else{
           window.attachEvent("onscroll",function(){ obj.setMessageBoxTop(1);});  
           window.attachEvent("onresize",function(){ obj.setDivSize(); });        
        }
 }
  //设置select的可见状态
 __messageBox.prototype.setSelectState = function(state)
    {
        var slcList=document.getElementsByTagName('select');
        for(var i=0;i<slcList.length;i++)
        {
            slcList[i].style.visibility=state;
        }
     };
    /********************
     * 取窗口滚动条滚动高度 
     ******************/
  __messageBox.prototype.getScrollTop=function ()
    {
       return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
    };
    
  
    /********************
     * 取窗口可视范围的高度 
     *******************/
    __messageBox.prototype.getClientHeight=function()
    {
         return (navigator.userAgent.toLowerCase().indexOf("opera") != -1)?document.body.clientHeight:document.documentElement.clientHeight;         
    };
    /********************
     * 取窗口可视范围的宽度 
     *******************/
   __messageBox.prototype.getClientWidth=function()
    { 
       return (navigator.userAgent.toLowerCase().indexOf("opera") != -1)?document.body.clientWidth:document.documentElement.clientWidth;  
    };
    window.Alert=function(m,t,confirmFun,cancelFun)
    {   
        t= (t&&t!=null&&t!='')?t:"系统消息";
        new __messageBox().showMessageBox(t,m,300,1,confirmFun,cancelFun);
    }
    window.Confirm=function(m,t,confirmFun,cancelFun){
         t= (t&&t!=null&&t!='')?t:"系统消息";
        new __messageBox().showMessageBox(t,m,300,2,confirmFun,cancelFun);
    }      
 /**   
  调用方式    
 var messContent="<div style='padding:20px 10px 20px 10px;text-align:left;'><%= this.Language.RegistrationSuccessfulMessage %></div>";
var msg = new __messageBox();
 // 弹出提示框
 msg.showMessageBox('标题',messContent,300);
 
 // 弹出半透明的div
  msg.showBackgroundDiv()// 别忘记调用样式
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px; height:22px; line-height:22px;}
.mesWindowContent{margin:4px;font-size:12px; height:1%;}
.mesWindow .close{height:15px;width:40px;border:none;cursor:pointer;text-decoration:underline;background:#fff;text-align:right;}
 */
示例html 见下面

解决方案 »

  1.   

    再贴一下我实现的according
      <!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 runat="server">
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
        <title>首页</title>
        <style type="text/css" >
       *{ margin:0; padding:0; font-size:12px;}
    img{border:0px}
    body{margin:0 0 0 0;background:#fff;font-size:12px;font-family:宋体,Verdana;color:#666;height:100%}
    a:link,a:visited {text-decoration: none;color: #0000ff;font-family: "宋体";font-size: 9pt; outline:none;}
    a:hover{color:#ff0000;font-family: "宋体";font-size: 9pt;}
    ul{ margin:0; list-style-type:none;}
    .div_MemberManagerMenuItem{width:100%; height:1%;line-height:20px;  float:left; display:inline;}
    .div_MemberManagerMenuItem ul li  a{ text-decoration: none;color: #0000ff;font-family: "宋体";font-size: 9pt;}
    .div_MemberManagerMenuItem ul li  a:hover {color:#ff0000;font-family: "宋体";font-size: 9pt;}
    .div_MemberManagerMenuItem ul li { padding:5px 6px 4px 6px; border-bottom:1px solid #EEE;}
    .div_MemberManagerMenuItem h6{cursor:pointer;background:#F0F0F0 ; padding:5px 6px 4px 6px; width:92%; border:1px solid #E0E0E0;}    </style>
    </head>
    <body>
      <div style="width:300px;" id="div_MemberManagerMenu">
         <div class="div_MemberManagerMenuItem" >
            <h6>天使宝宝1</h6>
            <ul>     
              <li> <a href='' >09.3.25 胡乐天</a></li>            
              <li><a href='' >09.3.30李泽铨</a></li>  
              <li><a href='' >09.5.20周旭</a></li>
            </ul>
        </div>
        <div class="div_MemberManagerMenuItem" >
            <h6>天使宝宝2</h6>
            <ul>     
              <li><a href='' >09.6.10宋周雨佳</a></li> 
              <li><a href='' >09.6.19魏力新</a></li> 
                <li><a href='' >09.3.30李泽铨</a></li>  
              <li><a href='' >09.5.20周旭</a></li>
            </ul>
        </div>
         <div class="div_MemberManagerMenuItem" >
            <h6>天使宝宝3</h6>
            <ul>   
             <li><a href='' >09.3.30李泽铨</a></li>  
              <li><a href='' >09.5.20周旭</a></li>  
              <li><a href='' >09.6.19魏力新</a></li> 
                <li><a href='' >09.3.30李泽铨</a></li>        
            </ul>
        </div>
         <div class="div_MemberManagerMenuItem" >
            <h6>天使宝宝4</h6>
            <ul>     
             <li><a href='' >09.6.19魏力新</a></li> 
                <li><a href='' >09.3.30李泽铨</a></li>       
            </ul>
        </div>
         </div>
       </body>  
         <script type="text/javascript" src="/JS/According.js" charset='utf-8'></script>
    <script type="text/javascript">
    var $ = function (id,obj) {  
        obj = obj|| document;
        return "string" == typeof id ? obj.getElementById(id) : id;   
    };  
    var $$ = function (name,obj) {  
        obj = obj|| document;
        return "string" == typeof name ? obj.getElementsByTagName(name) : name;   
    };  
        (function(){
            var mainMenu = $("div_MemberManagerMenu");
           var according = new __AccordingClass();
           //according.isMultiExpand = true;
           according.initAccording( $$("h6",mainMenu), $$("ul",mainMenu));    })();  
    </script>
    </html>/*
    功能：滑动门效果封装类
    作者：胡成洪
    日期：2010-06-29
    */
    function __AccordingClass()
    {
        this.isMultiExpand = false; // 是否允许多个同时展开
        this.expandClassName ='';  // 内容展开后的，头类名称
        this.foldedClassName ='';  // 内容折叠后的，头类名称
        this.speedTime = 5 ;       // 展开折叠速度 ，隔多少毫秒执行一次
        this.speedCount=10 ;       // 展开折叠渐变次数，多少次完成展开折叠
        this.defaultExpandIndex = 0; // 默认展开的索引
        var isIE = !!document.all;
        var according=[];            // 
        var obj = null;
        var accordingPan =function()
        {   
            this.isExpand = true;
            this.maxHeight=0;
            this.timer=null;
            this.header=null;
            this.content = null;
        };
        this.initAccording = function(headerList,contentList,exClassName,fdClassName)
        {
            if(headerList&&contentList&&headerList!=null&&contentList!=null&&headerList.length>0&&headerList.length==contentList.length){
                  obj = this;
                  for(var i=0;i<headerList.length;i++)
                  {
                      according[i] = new  accordingPan();
                      according[i].maxHeight = contentList[i].offsetHeight;
                      according[i].header = headerList[i];
                      according[i].content = contentList[i];
                      according[i].content.style.overflow='hidden';
                      if(exClassName&&exClassName!=null&&exClassName!='')obj.expandClassName = exClassName;
                       if(fdClassName&&fdClassName!=null&&fdClassName!='')obj.expandClassName = fdClassName;
                      obj.bindEvent(i);
                  }
                  if(!obj.isMultiExpand)
                  {
                       obj.expandFolded(obj.defaultExpandIndex);
                  }
            }
        };
        this.bindEvent = function(i)
        {
             if(window.addEventListener){
                   according[i].header.addEventListener('click', function(e){ obj.expandFolded(i);  },false); 
              }else{
                   according[i].header.attachEvent("onclick",function(){ obj.expandFolded(i);  });   
             }   
        };
        this.expandFolded = function(i)
        {    
                 if( according[i].isExpand)
                 {    
                     if(obj.isMultiExpand)
                     {
                        clearInterval(according[i].timer);
                      according[i].timer=setInterval(function(){obj.folded(i);},obj.speedTime);
                   }else{
                        for(var j=0;j<according.length;j++){
                         if(i!=j)obj.toFolded(j);
                        }
                   }
                 }
                 else
                 {  
                     clearInterval(according[i].timer);
                  according[i].content.style.display='';
             according[i].timer=setInterval(function(){obj.expand(i);},obj.speedTime);
             if(!obj.isMultiExpand)
                     {
                        for(var j=0;j<according.length;j++){
                           if(i!=j)obj.toFolded(j);
                        }
                     } 
                 }
        };
        this.toFolded = function(i){
             clearInterval(according[i].timer);
              according[i].timer=setInterval(function(){obj.folded(i);},obj.speedTime);
        };
        this.expand=function(i)
        {
            var h = according[i].content.offsetHeight;
           if(h<according[i].maxHeight)
           {
       var v = Math.round((according[i].maxHeight-h)/obj.speedCount);
        v = (v<1) ? 1 :v ;
        v+=h;
       according[i].content.style.height=( v)+'px';
       if(isIE){
            according[i].content.style.filter= 'alpha(opacity='+(v*100/according[i].maxHeight)+');';
       }else{
             according[i].content.style.opacity = (v/according[i].maxHeight);
       }
        }else{ 
            if(obj.expandClassName !='') according[i].header.className = obj.expandClassName ;
        according[i].content.style.height=according[i].maxHeight +'px';
        according[i].isExpand = true;
        clearInterval(according[i].timer);
        }
        };
        this.folded=function(i)
        {
           var h = according[i].content.offsetHeight;
           if(h> 0)
           {
       var v = Math.round(h/obj.speedCount);
       v = (v<1) ? 1 :v ;
       according[i].content.style.height=(h - v)+'px';
       if(isIE){
            according[i].content.style.filter= 'alpha(opacity='+(v*100/according[i].maxHeight)+');';
       }else{
             according[i].content.style.opacity = (v/according[i].maxHeight);
       }
        }else{
             if(obj.foldedClassName !='') according[i].header.className = obj.foldedClassName ;
        according[i].content.style.height='0px';
        according[i].content.style.display='none';
        according[i].isExpand = false;
        clearInterval(according[i].timer);
        }
        }
    }
      

  2.   


      支持原创、浏览器是不是不是很兼容。MessageBox如果没有设置隐藏，1后自动渐隐
      

  3.   

    theforever 用是是什么版本的IE。
    我用IETest、chrome、firefox 测试都没发现问题！ 说明： 我  css 勉强入门而已！ 有css 高手 可以帮忙 美化一下 弹出层的样式！