动态弹出层编写

下面是本人不结合任何框架,实现一个简单的弹出框程序:

var dragobj;
var relLeft;
var relTop;
var showDivW=440;
var showDivH=240;
//获取div的对象
function getObj(divId){
  var obj = document.getElementById(divId);
  return obj;
}

//下面是一个判断浏览器是否是IE
function isIE(){
      return (document.all && window.ActiveXObject && !window.opera) ? true : false;
}
//下面方法用于创建一个覆盖层
function creatDiv(divId){
   return document.createElement(divId);
}

//下面用于取得页面高与宽
function getBodySize(){
   var bodySize=[];
   with(document.documentElement){
   bodySize[0]=(scrollWidth>clientWidth)?scrollWidth:clientWidth;
   bodySize[1]=(scrollHeight>clientHeight)?scrollHeight:clientHeight;
   }
   return bodySize;
}

//下面这个方法用于改变弹出的div层的位置与大小
function changeDiv(i){
 var showDiv = getObj("dialogDiv");
 var bodySize = getBodySize();
  showDiv.style.left=(bodySize[0]-i*i*4)/2+"px";
  showDiv.style.top=(bodySize[1]-i*i*4)/2+"px";
  showDiv.style.width=i*i*4+"px";
  showDiv.style.height=i*i*1.5+"px";
  if(i<10){
  i++;
  setTimeout("changeDiv("+i+")",10);
  }else{
   showDiv.style.left=(bodySize[0]-showDivW)/2+"px";
  showDiv.style.top=(bodySize[1]-showDivH)/2+"px";
    showDiv.style.width=showDivW+"px";
  showDiv.style.height=showDivH+"px";
  }
}
//下面用于显示带有样式的div
function displayDiv(){
  var mainDiv = getObj("dialogDiv");
      mainDiv.style.position = "absolute";
     mainDiv.style.border = "1px solid #CCCCCC";
      mainDiv.style.background ="#BFEFFF";
      mainDiv.style.display="block";
     var i=0;
       changeDiv(i);

     
}
//当层显示出来的时候覆盖下面层
function popCoverDiv(){
   if(getObj("cover_div")){
   getObj("cover_div").style.display="block";
   }else{
   var coverDiv = creatDiv("div");
   document.body.appendChild(coverDiv);
   coverDiv.id="cover_div";
   with(coverDiv.style){
  
   position="absolute";
   background="#8B5F65";
   left="0px";
   top="0px";
   var bodySize=getBodySize();
   width=bodySize[0]+"px";
   height=bodySize[1]+"px";
   zIndex=0;
   if(isIE()){
   filter="Alpha(Opacity=70)";
   }

   }
   }

}
//给div注册拖拽函数
window.οnlοad=function(){
   var mainDiv = getObj("dragDiv");
      mainDiv.οnmοusedοwn=function(e){
      e=e||event;
      dragobj=this.parentNode;
      dragobj.style.position="absolute";
      relLeft =e.clientX - dragobj.style.pixelLeft;
      relTop =e.clientY-dragobj.style.pixelTop;     
     dragobj.style.filter = "Alpha(opacity=60)";
      };
      mainDiv.οnmοusemοve=function(e){
            e=e||event;
            if(dragobj!=null){
            dragobj.style.pixelLeft=e.clientX-relLeft;
            dragobj.style.pixelTop=e.clientY-relTop;
            }
      }
      mainDiv.οnmοuseup=function(e){
      e=e||event;
      dragobj=this.parentNode;
      dragobj.style.filter="Alpha(apacity=100)";
      dragobj=null;
      }
}
function show(){

 displayDiv();
 popCoverDiv();
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值