組件--彈出層

時間 2019-11-24

標籤組件彈出简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
     *{
          padding: 0;
          margin: 0;
     }

     .pop{
          position: fixed;
          width: 100px;
          height: 100px;
          background-color: #aaa;
          border:1px solid #ccc;
          z-index:99;
     }
     .title{
          height: 30px;
          background-color: gray;
          color:#fff;
     }
     #mark{ position: absolute; z-index:1; width:100%; height:100%; background-color: #000; filter:alpha(opacity=70); opacity: 0.7; top:0; left:0;}
</style>
</head>
<body>
    <input type="button" value="btn1" />
    <input type="button" value="btn1" />
    <input type="button" value="btn1" />
     
     
    <script type="text/javascript">
         window.onload = function(){
              var abtn = document.getElementsByTagName('input');

              abtn[0].onclick = function(){
                   var d1 = new pop(); //生成一個實例
                        d1.init({ //初始化實例，第一個走默認配置
                             iNow : 0

                        });

              }
              abtn[1].onclick = function(){
                   var d1 = new pop(); //生成一個實例
                        d1.init({ //初始化實例，設置配置項
                             iNow : 1,
                             width: 200,
                             height: 200,
                             dir   : 'right',
                             title : ' ',
                             mark : true
                        });

              }
         }

         function pop(){ //構造函數，模版
              this.isPop = null;
              this.setting = { //默認參數
                   width: 300,
                   height:300,
                   dir   : 'center',
                   mark : false
              }
         };
         pop.prototype.json = {};

         pop.prototype.init=function(opt){
              extend(this.setting, opt);//for in繼承

              if(this.json[opt.iNow] == undefined){
                   this.json[opt.iNow] = true;
              }
              if(this.json[opt.iNow]){
                   this.create(); //建立彈出框對象
                   this.setClose(); //定義關閉按鈕
                   //定義遮罩
                   if(this.setting.mark){
                        this.setMark();
                   }
                   this.json[opt.iNow] = false;
              }

         }
         //建立彈窗
         pop.prototype.create = function(){
              //建立彈框html
              this.isPop = document.createElement('div');
              this.isPop .className = 'pop';
              this.isPop .innerHTML = '<div class="title"><h2>title</h2></div><em id="close">關閉</em><div class="content">content</div>';
              document.body.appendChild(this.isPop);
              this.setStyle(); //設置彈框樣式

         }
         pop.prototype.setMark = function(){
              //建立遮罩層
              var oMark = document.createElement('div');
              oMark.id = 'mark';
              //追加遮罩html到頁面中
              document.body.appendChild(oMark);
              //設置遮罩層樣式
              oMark.style.width = setViewW() + 'px';
              oMark.style.height = setViewH() + 'px';
              this.oMark = oMark;

         }
         pop.prototype.setStyle = function(){
              //設置pop的寬高
              this.isPop.style.width = this.setting.width+'px';
              this.isPop.style.height = this.setting.height+'px';
              //alert(setViewH());
              //判斷在窗口的位置
              if(this.setting.dir == 'center'){
                   this.isPop.style.left = (setViewW() - this.isPop.offsetWidth)/2 + 'px';
                   this.isPop.style.top = (setViewH() - this.isPop.offsetHeight)/2 + 'px';
              }else if(this.setting.dir == 'right'){
                   this.isPop.style.left = (setViewW() - this.isPop.offsetWidth) + 'px';
                   this.isPop.style.top = (setViewH() - this.isPop.offsetHeight) + 'px';
              }

         }
         //定義關閉功能
         pop.prototype.setClose = function(){
              var closeBtn = this.isPop.getElementsByTagName('em')[0];
              var _this = this;
                   closeBtn.onclick = function(){
                        document.body.removeChild(_this.isPop); //移除彈出層
                        //移除遮罩層
                        if(_this.setting.mark){
                             document.body.removeChild(_this.oMark);
                        }
                        _this.json[_this.setting.iNow] = true;
                   }

         }
         //封裝可視區寬高
         function setViewW(){
              return document.documentElement.clientWidth;
         }
         function setViewH(){
              return document.documentElement.clientHeight;
         }

         //##
         function extend(c, p){
              for(var attr in p){
                   c[attr] = p[attr];
              }
         }

         //
    </script>
</body>
</html>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。