<!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>