标签：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0;} .login{ background:white; border:1px #000 solid; position:absolute; left:0; top:0; z-index:2;} .title{ height:30px; background:gray; color:white;} .title .close{ float:right;} #mark{ background:black; fitler:alpha(opacity=50); opacity:0.5; position:absolute; left:0; top:0; z-index:1;} </style> <script> window.onload = function(){ var aInput = document.getElementsByTagName(‘input‘); aInput[0].onclick = function(){ var d1 = new Dialog(); d1.init({ //配置参数 iNow : 0, title : ‘登录‘ }); }; aInput[1].onclick = function(){ var d1 = new Dialog(); d1.init({ //配置参数 iNow : 1, w : 100, h : 400, dir : ‘right‘, title : ‘公告‘ }); }; aInput[2].onclick = function(){ var d1 = new Dialog(); d1.init({ //配置参数 iNow : 2, mark : true }); }; }; function Dialog(){ this.oLogin = null; this.settings = { //默认参数 w : 300, h : 300, dir : ‘center‘, title : ‘‘, mark : false }; } Dialog.prototype.json = {}; Dialog.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.fnClose(); if(this.settings.mark){ this.createMark(); } this.json[opt.iNow] = false; } }; Dialog.prototype.create = function(){ this.oLogin = document.createElement(‘div‘); this.oLogin.className = ‘login‘; this.oLogin.innerHTML = ‘<div class="title"><span>‘+ this.settings.title +‘</span><span class="close">X</span></div><div class="content"></div>‘; document.body.appendChild( this.oLogin ); this.setData(); }; Dialog.prototype.setData = function(){ 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‘; } else if( this.settings.dir == ‘right‘ ){ this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth) + ‘px‘; this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight) + ‘px‘; } }; Dialog.prototype.fnClose = function(){ var oClose = this.oLogin.getElementsByTagName(‘span‘)[1]; var This = this; oClose.onclick = function(){ document.body.removeChild( This.oLogin ); if(This.settings.mark){ document.body.removeChild( This.oMark ); } This.json[This.settings.iNow] = true; }; }; Dialog.prototype.createMark = function(){ var oMark = document.createElement(‘div‘); oMark.id = ‘mark‘; document.body.appendChild( oMark ); this.oMark = oMark; oMark.style.width = viewWidth() + ‘px‘; oMark.style.height = viewHeight() + ‘px‘; }; function extend(obj1,obj2){ for(var attr in obj2){ obj1[attr] = obj2[attr]; } } function viewWidth(){ return document.documentElement.clientWidth; } function viewHeight(){ return document.documentElement.clientHeight; } </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>--> <!--<div id="mark"></div>--> </body> </html>
标签：
原文地址：http://www.cnblogs.com/liujin0505/p/4376690.html
