<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><style type="text/css"> *{ padding: 0; margin: 0; } .pop{ position: fixed; width: 100px; height: 100px; background-color: #aaa; border:1px solid #ccc; z-index:99; } .title{ height: 30px; background-color: gray; color:#fff; } #mark{ position: absolute; z-index:1; width:100%; height:100%; background-color: #000; filter:alpha(opacity=70); opacity: 0.7; top:0; left:0;}</style></head><body> <input type="button" value="btn1" /> <input type="button" value="btn1" /> <input type="button" value="btn1" /> <!-- <div div="pop"> <div class="title"> <h2>title</h2> </div> <div class="content"> content </div> </div> --> <!-- <div id="mark"></div> --> <script type="text/javascript"> window.onload = function(){ var abtn = document.getElementsByTagName('input'); abtn[0].onclick = function(){ var d1 = new pop(); //生成一个实例 d1.init({ //初始化实例，第一个走默认配置 iNow : 0 }); } abtn[1].onclick = function(){ var d1 = new pop(); //生成一个实例 d1.init({ //初始化实例，设置配置项 iNow : 1, width: 200, height: 200, dir : 'right', title : ' ', mark : true }); } } function pop(){ //构造函数，模版 this.isPop = null; this.setting = { //默认参数 width: 300, height:300, dir : 'center', mark : false } }; pop.prototype.json = {}; pop.prototype.init=function(opt){ extend(this.setting, opt);//for in继承 if(this.json[opt.iNow] == undefined){ this.json[opt.iNow] = true; } if(this.json[opt.iNow]){ this.create(); //创建弹出框对象 this.setClose(); //定义关闭按钮 //定义遮罩 if(this.setting.mark){ this.setMark(); } this.json[opt.iNow] = false; } } //创建弹窗 pop.prototype.create = function(){ //创建弹框html this.isPop = document.createElement('div'); this.isPop .className = 'pop'; this.isPop .innerHTML = '<div class="title"><h2>title</h2></div><em id="close">关闭</em><div class="content">content</div>'; document.body.appendChild(this.isPop); this.setStyle(); //设置弹框样式 } pop.prototype.setMark = function(){ //创建遮罩层 var oMark = document.createElement('div'); oMark.id = 'mark'; //追加遮罩html到页面中 document.body.appendChild(oMark); //设置遮罩层样式 oMark.style.width = setViewW() + 'px'; oMark.style.height = setViewH() + 'px'; this.oMark = oMark; } pop.prototype.setStyle = function(){ //设置pop的宽高 this.isPop.style.width = this.setting.width+'px'; this.isPop.style.height = this.setting.height+'px'; //alert(setViewH()); //判断在窗口的位置 if(this.setting.dir == 'center'){ this.isPop.style.left = (setViewW() - this.isPop.offsetWidth)/2 + 'px'; this.isPop.style.top = (setViewH() - this.isPop.offsetHeight)/2 + 'px'; }else if(this.setting.dir == 'right'){ this.isPop.style.left = (setViewW() - this.isPop.offsetWidth) + 'px'; this.isPop.style.top = (setViewH() - this.isPop.offsetHeight) + 'px'; } } //定义关闭功能 pop.prototype.setClose = function(){ var closeBtn = this.isPop.getElementsByTagName('em')[0]; var _this = this; closeBtn.onclick = function(){ document.body.removeChild(_this.isPop); //移除弹出层 //移除遮罩层 if(_this.setting.mark){ document.body.removeChild(_this.oMark); } _this.json[_this.setting.iNow] = true; } } //封装可视区宽高 function setViewW(){ return document.documentElement.clientWidth; } function setViewH(){ return document.documentElement.clientHeight; } //## function extend(c, p){ for(var attr in p){ c[attr] = p[attr]; } } // </script></body></html>