打印

[原创]Javascript DOM 编程实例讲解--仿LightBox效果提示框(2008-4-5更新)

本主题由 caiying2007 于 2008-4-4 07:43 设置高亮

回复 fzy667 在 30# 的帖子

今天又加了个逐渐显示的效果,毕竟是一个提示窗口,也不能真的像lightbox那么花了。呵呵
海啸的地盘,有空来看看
谢谢楼主的辛勤劳动。虽然我还不太明白

回复 holyli 在 32# 的帖子

慢慢看,应该会看懂的,我的文章写的很详细了,今天把这个小程序简单的封装了一下。
海啸的地盘,有空来看看
学习到了,感谢lz的无私奉献
飘~

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

回复 eugenedk 在 34# 的帖子

对大家有用,就是我写文章的动力啊
海啸的地盘,有空来看看

TOP

赞叹甘于奉献的人,楼主好帖!

TOP

很不错,收藏了,呵呵

TOP

虽然俺做后台但是也给你赞一个 ,小伙子有"钱途"
思路決定出路,努力成就未來!

TOP

详细啊!支持支持

TOP

回复 stonelau 在 39# 的帖子

是吗?我就是希望我能够把原理讲详细些,大家都能看懂。谢谢支持
海啸的地盘,有空来看看

TOP

ms我的FF显示不对啊。。。。

TOP

TOP

回复 loadinger 在 41# 的帖子

这个是由于我昨天又稍微调了下样式,没有注意到FF里看看,现在好了。
海啸的地盘,有空来看看

TOP

回复 liaoyizhi520 在 42# 的帖子

这为朋友说得没有错啊,我确实是参考了EXT的样式,在网上找了很多,就这个风格我很喜欢。
海啸的地盘,有空来看看

TOP

不错,赞一个

TOP

回复 qifuren1985 在 45# 的帖子

谢谢支持
海啸的地盘,有空来看看

TOP

Javascript DOM 编程实例讲解--仿LightBox效果提示框

标记慢慢看~~~

TOP

辛苦楼主写了这么多,精神可佳

TOP

谢谢楼主的无私奉献精神,精品收藏!
致力于web2.0研究

TOP

这里是这个例子的一个实际运用,看看效果吧!

实际运用实例 看看效果怎么样?

对了,也帮我看看在IE6里的页面效果,这个网站做的急,3天的时间匆忙整的。

对了,今天都写了点样式,把OPREA下的遮招层的透明效果也添加了。

[ 本帖最后由 yaohaixiao 于 2008-4-16 09:39 编辑 ]
海啸的地盘,有空来看看

TOP

引用:
原帖由 yaohaixiao 于 2008-4-3 13:55 发表
做WEB前台开发也有两年多,在开发中经常要涉及到DOM编程,我想大家也跟我一样,经常要处理各种DOM编程的操作,今天我就拿一个提示框效果来作为实例,讲讲DOM编程的一些基础知识。由于个人能力有限,有什么不对的,也 ...
请楼主帮忙提取一下大旗网特效代码http://www.daqi.com/

TOP

回复 tdlisheng 在 51# 的帖子

自己去分析啊,这样才可以学到东西啊。
海啸的地盘,有空来看看

TOP

对了,再这里更正一下啊

document.all不只是IE的“专利”,Opera也使用这个方法获取节点。哎!!!
海啸的地盘,有空来看看

TOP

经过我简单封装后的代码

复制内容到剪贴板
代码:
<!--
var alertBox={
      isOpera:(navigator.userAgent.indexOf('Opera')>-1),
      
    // 根据ID获得DOM节点
    $: function(i){
         if(!document.getElementById)return false;
         if(typeof i==="string"){
                if(document.getElementById && document.getElementById(i)) {// W3C DOM
                  return document.getElementById(i);
           }
           else if(document.all && document.all(i)){// MSIE 4 DOM
                  return document.all(i);
           }
           else if(document.layers && document.layers[i]){// NN 4 DOM.. note: this won't find nested layers
                  return document.layers[i];
           }
           else {
                  return false;
           }
         }
         else{return i;}
    },
   
    maxDragWidth: null,   // 拖动的最大宽度
    maxDragWidth: null,   // 拖动的最大高度
   
    oBtnShow: null,       // 创建提示信息框按钮节点
    oShadow: null,        // 遮照层
    oAlertWindow: null,   // 提示框层
    oDragHandle: null,    // 提示框的拖动柄
    oBtnEnter: null,      // 提示框的确定按钮
    oBtnClose: null,      // 提示框的关闭按钮   
   
    strMessage: null,     // 提示框的提示内容
    bSlideWindow: false,  // 是否渐变显示提示框,默认渐变
    bDragWindow: false,   // 是否拖动提示框,默认拖动
    iWindowIcon: 1,       // 弹出窗口图标的风格
   
    init: function(strMsg,bSlide,bDrag){
            this.oBtnShow=this.$("btnshow");
            this.strMessage=strMsg;
           
            this.bSlideWindow=bSlide?false:true;
            this.bDragWindow=bDrag?false:true;
           
           
            if(!this.oBtnShow){
                  if(this.oShadow && this.oAlertWindow){
                        this.closeDiv();
                  }
              this.createDiv();
              this.setEvent();
            }
            else{
                this.oBtnShow.onclick=function(){
                  alertBox.createDiv();
                  alertBox.setEvent();
              }
          }
    },
   
    createDiv: function(obj){
           if(this.oBtnShow) this.oBtnShow.disabled=true;
          
           var shadow = document.createElement("id");
          
           shadow.setAttribute("id","shadow");
           shadow.style.height=parseInt(document.body.offsetHeight)+"px";
           var obj=document.createElement("div");
           obj.setAttribute("id","window");
           obj.style.zIndex="999";
           if(document.all){
                   if(this.isOpera){
                           obj.style.opacity = 0.1;
                   }
                   else{
                           obj.style.filter = "alpha(opacity=10)";
                   }       
             }
             else{
                   obj.style.opacity = 0.1;
             }
             
           var divTitle = document.createElement("div");
           divTitle.setAttribute("id","win-tl");
       
           var H2 = document.createElement("h2");
       
           var IMG=document.createElement("img");
           IMG.setAttribute("src","alertImg/win.png");
           IMG.setAttribute("alt","Window-Icon");
       
           var txtTitle=document.createTextNode("爱唱卡充值");
          
           H2.appendChild(IMG);
           H2.appendChild(txtTitle);
       
           var closeBar=document.createElement("div");
           closeBar.setAttribute("id","closebar");
           var A = document.createElement("a");
           A.innerHTML="关闭窗口";
           A.setAttribute("href","#1");
           A.setAttribute("id","btnclose");
           A.setAttribute("title","关闭窗口");
       
           closeBar.appendChild(A);
       
           var titleRight=document.createElement("div");
           titleRight.setAttribute("id","win-tr");       
    
           divTitle.appendChild(H2);
           divTitle.appendChild(closeBar);
           divTitle.appendChild(titleRight);
       
           var Container = document.createElement("div");
           Container.setAttribute("id","msg-content");
       
           var cntLeft=document.createElement("div");
           cntLeft.setAttribute("id","msg-leftbar");
       
           var MSG=document.createElement("div");
           MSG.setAttribute("id","msg");
       
           var INFO=document.createElement("div");
           INFO.setAttribute("id","info");
       
           var H3 = document.createElement("h3");
           H3.innerHTML="恭喜您充值成功!";
       
           var P = document.createElement("p");
           P.innerHTML="充值单号为:<strong id=\"txtuid\">"+this.strMessage+"</strong>(请您牢记,便于查询)";
       
           INFO.appendChild(H3);
           INFO.appendChild(P);
       
           var Btns=document.createElement("div");
           Btns.setAttribute("id","btns");
       
           var btnEnter=document.createElement("a");
           btnEnter.setAttribute("id","btnok");
           btnEnter.setAttribute("href","#1");
       
           var txtEnter=document.createTextNode("确定");
       
           btnEnter.appendChild(txtEnter);   
           Btns.appendChild(btnEnter);
       
           MSG.appendChild(INFO);
           MSG.appendChild(Btns);
       
           var cntRight=document.createElement("div");
           cntRight.setAttribute("id","msg-rightbar");
       
           Container.appendChild(cntLeft);
           Container.appendChild(MSG);
           Container.appendChild(cntRight);   
       
           var msgBottom = document.createElement("div");
           msgBottom.setAttribute("id","msg-bottom");
       
           var msgBLeft=document.createElement("div");
           msgBLeft.setAttribute("id","msg-bottom-left");
       
           var msgBRight=document.createElement("div");
           msgBRight.setAttribute("id","msg-bottom-right");
           msgBottom.appendChild(msgBLeft);
           msgBottom.appendChild(msgBRight);
       
           document.body.appendChild(shadow);
           obj.appendChild(divTitle);
           obj.appendChild(Container);
           obj.appendChild(msgBottom);
           document.body.appendChild(obj);
          
           this.oAlertWindow=obj;
           this.oDragHandle=divTitle;
           this.oShadow=shadow;
           this.oBtnEnter=btnEnter;
           this.oBtnClose=A;
       },   
       
       setEvent: function(){
           if(!this.oAlertWindow || !this.oDragHandle || !this.oShadow || !this.oBtnEnter || !this.oBtnClose) return false;
          
           if(this.bDragWindow){
                   this.dragDiv();
           }
           else{
                this.oAlertWindow.style.top=(document.body.offsetHeight-180)/2+"px";;
                this.oAlertWindow.style.left=(document.body.offsetWidth-400)/2+"px";    
           }       
          
          
           if(this.bSlideWindow){
                   this.slideDiv();
           }
           else{
                if(document.all){
                         if(this.isOpera){
                             this.oAlertWindow.style.opacity = 1;
                         }
                         else{    
                             this.oAlertWindow.style.filter = "";
                         }
                  }
                  else{
                         this.oAlertWindow.style.opacity = 1;
                  }
           }
     
           // 设置关闭和确定按钮的功能--关闭(移除)提示框      
         this.oBtnEnter.onclick=this.oBtnClose.onclick=function(){
              alertBox.closeDiv();                                 
         }    
     },
     
     dragDiv: function(){
            this.maxDragWidth=document.body.offsetWidth-400;
            this.maxDragHeight=document.body.offsetHeight-180;
            Drag.init(this.oDragHandle,this.oAlertWindow,true,0,this.maxDragWidth,0,this.maxDragHeight);
     },
   
     slideDiv: function(){
           var i=10;
           var j=0.1;
           var _fliter_=function(){
                  if(document.all){
                          if(i>100 || j>1){
                               if(tt) tt=window.clearInterval(tt);
                              if(alertBox.isOpera){
                                   this.oAlertWindow.style.opacity = 1;
                              }
                              else{    
                                       alertBox.oAlertWindow.style.filter ="";
                               }
                               return false;
                           }
                          if(alertBox.isOpera){
                              alertBox.oAlertWindow.style.opacity = j;
                              j += 0.1;
                          }
                          else{    
                             alertBox.oAlertWindow.style.filter = "alpha(opacity="+i+")";
                               i += 10;
                         }   
                  }
                  else{
                           if(j>1){
                                if(tt) tt=window.clearInterval(tt);
                                alertBox.oAlertWindow.style.opacity=1;
                                return false;
                           }
                          alertBox.oAlertWindow.style.opacity = j;
                          j += 0.1;
                  }
           }
           var tt=window.setInterval(_fliter_,50);
     },
     closeDiv: function(){
             if(this.oAlertWindow.style.filter=="" || this.oAlertWindow.style.opacity==1){
               document.body.removeChild(this.oAlertWindow);
               document.body.removeChild(this.oShadow);
               if(this.oBtnShow) this.oBtnShow.disabled=false;     
          }  
     }       
}
window.onresize=function(){
       if(alertBox.oAlertWindow && alertBox.oDragHandle){
            alertBox.dragDiv();
       }
}
//-->
海啸的地盘,有空来看看

TOP

恩 确实一个好帖子 看了楼主的博客 里面还有很多不错的内容那
每人一小步 中国一大步 加油 加油 加油

TOP

一定要顶一下

TOP

回复 xiahaiyong 在 56# 的帖子

谢谢支持啊
海啸的地盘,有空来看看

TOP

呵呵..楼主的代码我已经改过了..改得每个浏览器都兼容..而且拖动比楼主的顺畅..哈哈..希望楼主不介意..