js 弹窗组件的开发 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
.login{ background:white; border:1px #000 solid; position:absolute; left:0; top:0;  z-index:2;}
.title{ height:30px; background:gray; color:white;}
.title .close{ float:right;}
#mark{ background:black; fitler:alpha(opacity=50); opacity:0.5; position:absolute; left:0; top:0; z-index:1;}
</style>
<script>

window.onload = function(){
   var aInput = document.getElementsByTagName('input');
   
   aInput[0].onclick = function(){
      
      var d1 = new Dialog();
      d1.init({   //配置参数
         iNow : 0,
         title : '登录'
      });
      
   };
   
   aInput[1].onclick = function(){
      
      var d1 = new Dialog();
      d1.init({   //配置参数
         iNow : 1,
         w : 100,
         h : 400,
         dir : 'right',
         title : '公告'
      });
      
   };
   
   aInput[2].onclick = function(){
      
      var d1 = new Dialog();
      d1.init({   //配置参数
         iNow : 2,
         mark : true
      });
      
   };
   
   
};

function Dialog(){
   
   this.oLogin = null;
   
   this.settings = {   //默认参数
      w : 300,
      h : 300,
      dir : 'center',
      title : '',
      mark : false
   };
   
}

Dialog.prototype.json = {};

Dialog.prototype.init = function( opt ){
   
   extend( this.settings , opt );
   
   
   if( this.json[opt.iNow] == undefined ){
      this.json[opt.iNow] = true;
   }
   
   
   if(this.json[opt.iNow]){
      this.create();
      this.fnClose();
      
      if(this.settings.mark){
         this.createMark();
      }
      
      this.json[opt.iNow] = false;
      
   }
   
};

Dialog.prototype.create = function(){
   
   this.oLogin = document.createElement('div');
   this.oLogin.className = 'login';
   this.oLogin.innerHTML = '<div class="title"><span>'+ this.settings.title +'</span><span class="close">X</span></div><div class="content"></div>';
   
   document.body.appendChild( this.oLogin );
   
   this.setData();
};

Dialog.prototype.setData = function(){
   
   this.oLogin.style.width = this.settings.w + 'px';
   this.oLogin.style.height = this.settings.h + 'px';
   
   if( this.settings.dir == 'center' ){
      this.oLogin.style.left =  (viewWidth() - this.oLogin.offsetWidth)/2 + 'px';
      this.oLogin.style.top =  (viewHeight() - this.oLogin.offsetHeight)/2 + 'px';
   }
   else if( this.settings.dir == 'right' ){
      this.oLogin.style.left =  (viewWidth() - this.oLogin.offsetWidth) + 'px';
      this.oLogin.style.top =  (viewHeight() - this.oLogin.offsetHeight) + 'px';
   }
   
};

Dialog.prototype.fnClose = function(){
   
   var oClose = this.oLogin.getElementsByTagName('span')[1];
   var This = this;
   
   oClose.onclick = function(){
      
      document.body.removeChild( This.oLogin );
      
      if(This.settings.mark){
         document.body.removeChild( This.oMark );
      }
      
      This.json[This.settings.iNow] = true;
      
   };
   
};

Dialog.prototype.createMark = function(){
   
   var oMark = document.createElement('div');
   oMark.id = 'mark';
   
   document.body.appendChild( oMark );
   
   this.oMark = oMark;
   
   oMark.style.width = viewWidth() + 'px';
   oMark.style.height = viewHeight() + 'px';
   
};

function extend(obj1,obj2){
   for(var attr in obj2){
      obj1[attr] = obj2[attr];
   }
}

function viewWidth(){
   return document.documentElement.clientWidth;
}
function viewHeight(){
   return document.documentElement.clientHeight;
}


</script>
</head>

<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">

<!--<div class="login">
   <div class="title">
       <span>标题</span><span class="close">X</span>
    </div>
    <div class="content"></div>
</div>-->
<!--<div id="mark"></div>-->
</body>
</html>

posted on 2021-10-26 22:31  完美前端  阅读(244)  评论(0)    收藏  举报

导航