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