首页 > 代码库 > 组件开发之弹窗-1

组件开发之弹窗-1

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>组件开发 弹窗 </title>    <style type="text/css">      *{          margin: 0px;          padding: 0px;      }        #box1{            border: 1px solid black;            position: absolute;        }        .head{            height: 20px;            background: #CCCCCC;        }        .right{            float: right;            cursor: pointer;        }    </style>    </head>    <body>        <input type="button" value="按钮1" />        <input type="button" value="按钮2" />        <input type="button" value="按钮3" />        <!--<div id="box1">                    </div>-->          <script type="text/javascript">           //只执行一次就叫单体模式             window.onload=function()             {                  var ainput = document.getElementsByTagName("input");                  ainput[0].onclick=function()                  {                      var d1 = new Drag();                     d1.init({//配置参数                                                });                                        };                                };             function Drag()//属性             {                  this.ologin=null;//局部变量改变成属性                this.settings={//默认参数                    w:300,                    h:300,                    dir:"center"                }             }             Drag.prototype.init=function(opt)//方法             {                    extend(this.settings,opt);                    this.create();//动态创建弹窗                    this.oclose();//动态创建关闭                              };             Drag.prototype.create=function()             {                  //var ologin =document.createElement("div");                 this.ologin =document.createElement("div");                      this.ologin.id="box1";                      this.ologin.innerHTML=<div class="head"><span class="title">标题</span><span class="right">X</span></div><div class="content"></div>               document.body.appendChild(this.ologin);               this.setDate();//尺寸             }             Drag.prototype.setDate=function()             { // ologin 属性因为找不到 所以要设置全局的                 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";                 }             }             Drag.prototype.oclose=function()             {                   var oclose =document.getElementsByTagName("span")[1];                   var _this = this;                   oclose.onclick=function()                   {                       document.body.removeChild(_this.ologin);                   }                                }             //-----------------------             function  viewWidth(){                   return document.documentElement.clientWidth;//可视区宽度             }              function  viewHeight(){                   return document.documentElement.clientHeight;//可视区高度             }             function extend (obj1,obj2){                 for (var attr in obj2) {                     obj1[attr]=obj2[attr];                 }             }                   </script>          </body></html>

 

组件开发之弹窗-1