原生js开发的弹框组件

来源：互联网发布：浦发淘宝信用卡好用吗编辑：程序博客网时间：2024/05/18 13:12
<!doctype html><html lang="en" ng-app = 'myApp' ><head>    <meta charset="UTF-8">    <title>Document</title><style type="text/css">*{ margin:0; padding:0;}input { width:60px; height: 30px;}.login{ background:white; border:1px #000 solid; position:absolute; left:0; top:0;}.title{ height:30px; line-height: 30px; background:gray; color:white;}.title .close{ float:right; width:30px; height: 30px;  text-align: center;  cursor: pointer; line-height: 30px;}</style><script type="text/javascript">window.onload = function(){    var aInput = document.getElementsByTagName("input");  aInput[0].onclick = function(){    var p1  = new oPop();    p1.init({      iNow : 0,      title:"我是标题1",      w : 300,      h :300,      dir:"center"    })  }  aInput[1].onclick = function(){    var p2  = new oPop();    p2.init({      iNow:1,      title:"我是标题2",      w :120,      h :300,      dir:"right"    })  }  function oPop(){    this.opoup = null;    this.settings = {      id : "login",      w : 300,      h: 200    }  }  oPop.prototype.json = {}//为了防止多次点击,只能点击一次  oPop.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.close();      this.json[opt.iNow] = false;    }    }  oPop.prototype.create = function(){//创建弹框DOM    this.opoup = document.createElement("div");    this.opoup.className = "login";    this.opoup.innerHTML = '<div class="title"><span>'+this.settings.title+'</span><span class="close">×</span></div><div class="content"></div>';    document.body.appendChild(this.opoup);    this.opoup.style.width = this.settings.w + 'px';    this.opoup.style.height = this.settings.h + 'px';    if(this.settings.dir =="center"){      this.opoup.style.left  = (viewWidth() - this.opoup.offsetWidth)/2 + 'px';      this.opoup.style.top  = (viewHeight() - this.opoup.offsetHeight)/2 + 'px';    }    else if( this.settings.dir == 'right' ){      this.opoup.style.left =  (viewWidth() - this.opoup.offsetWidth) + 'px';      this.opoup.style.top =  (viewHeight() - this.opoup.offsetHeight) + 'px';    }  }  oPop.prototype.close = function(){//右侧关闭按钮    var aSpan = document.getElementsByTagName("span");    var This = this;    aSpan[1].onclick = function(){      document.body.removeChild(This.opoup);      This.json[This.settings.iNow] = true; //在关闭按钮的时候 变成true 然后下次可点击    }  }  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></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>--></body></html>
0 0