首页 > 代码库 > 组件开发之弹窗-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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。