原生js开发的弹框组件
2016-01-27 15:57
232 查看
<!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>
相关文章推荐
- JavaScript复习笔记——字符串
- Javascript变量和属性的区别
- Struct2或者SSH项目中添加手机短信登录及期间遇到的一些问题
- ExtJS5 - 用鼠标拖拽Grid行进行排序及选择
- js中table的值进行点击排序
- JS 学习1--开始
- 使用javascript实现银行卡号的Luhn校验或验证算法
- Javascript性能优化之异步加载和执行
- 20160127--Jsp
- Extjs4 获取到前一天的日期
- JavaScript-时间倒计时
- JSP EL表达式详细介绍
- javascript改变position值实现菜单滚动至顶部后固定
- js checkbox
- js弹出框、对话框、提示框、弹窗总结
- js 表单验证
- javascript 备忘
- javascript学习导图
- [ExtJS5学习笔记]第三节 sencha cmd学习笔记 生成应用程序构建的内部细节
- 在Ext JS 6中添加本地化包