完美的封装了popUpBox这个类
这个类一共两个公开方法
show 显示
hidden 隐藏
其他功能请自行扩展
不敢保证简单，但每一行都写了注释
<!DOCTYPE html><html>
<head>
<title>CSS 点击文字或按钮打开div浮动层 </title>
<meta charset="UTF-8" />
</head>
<script>
function popUpBox(){ //创建盒子类
this.init = function(){ //初始化函数
var onloadFunc = window.onload, //将window.onload事件执行的函数保存到onloadFunc
subInit = function(o){ //需要等结构加载完成执行的函数
document.body.appendChild(o.mask) //将遮罩添加到body
document.body.appendChild(o.box) //将盒子添加到body
},
createElement = function(){ //创建元素函数，共同的样式在这里已经设置
var e = document.createElement('div') //创建一个div
e.style.position = 'fixed' //设置定位方式为跟随浏览器移动
e.style.left = '0px' //元素x轴位置
e.style.top = '0px' //元素y轴位置
e.style.zIndex = '2000' //元素z轴位置
e.style.width = window.innerWidth + 'px' //元素宽度
e.style.height = window.innerHeight + 'px' //元素高度
e.style.margin = '0px' //元素的外边距
e.style.padding = '0px' //元素的内边距
e.style.backgroundColor = 'rgba(0, 0, 0, 0.3)' //元素的背景颜色
return e //返回这个元素
}
this.mask = createElement() //创建遮罩
this.mask.onclick = (function(o){ //创建匿名函数 参数一 传入需要操作的对象
return function(){ //匿名函数返回为遮罩绑定鼠标点击事件执行函数
o.hidden() //为o这个对象执行隐藏函数
}
})(this) //立即执行匿名函数 并传入当前对象
this.box = createElement() //盒子
this.box.style.left = window.innerWidth / 2 + 'px' //设置盒子水平居中
this.box.style.top = window.innerHeight / 2 + 'px' //设置盒子垂直居中
this.box.style.width = '400px' //设置盒子宽度
this.box.style.height = '300px' //设置盒子高度
this.box.style.border = '1px solid #3399ff' //设置边框
this.box.style.borderRadius = '5px' //设置圆的边框
this.box.style.zIndex = '2001' //设置盒子的z轴
this.box.style.backgroundColor = '#FFF' //设置盒子的背景颜色
this.box.style.transform = 'translate(-50%, -50%)' //执行2d动画，把这个盒子位置向反方向移动50%
this.box.innerHTML = '在这里设置盒子的内容，关闭盒子调用实例的hidden()函数即可，如这个实例想这样 loginBox.hidden()//就可以隐藏 '
this.hidden() //隐藏遮罩和盒子
window.onload = (function(o){ //创建匿名函数 参数一 要操作的对象
return function(){ //返回onload事件执行的函数
if(typeof onloadFunc == 'function'){ //判断onloadFunc中有没有函数，防止覆盖其他功能的执行事件
onloadFunc() //执行已经绑定的函数
}
subInit(o) //执行初始化需要执行的函数
}
})(this) //立即执行匿名函数 并传入当前对象
}
this.show = function(){ //显示
this.mask.style.display = 'block'
this.box.style.display = 'block'
}
this.hidden = function(){ //隐藏
this.mask.style.display = 'none'
this.box.style.display = 'none'
}
this.init() //调用初始化函数
}
var loginBox = new popUpBox() //创建一个实例，可以创建N个，互相不干扰
</script>
<body>
<a href="#" onclick="loginBox.show()">弹出盒子</a>
</body>
</html>
<script type="text/javascript">function init() {
// 获取文档尺寸
var documentSize = getDocumentSize()
// 获取视窗尺寸
var windowSize = getWindowSize()
// 对比大小，取大值
var pageWidth = documentSize.x >windowSize.x ? documentSize.x : windowSize.x
var pageHeight = documentSize.y >windowSize.y ? documentSize.y : windowSize.y
// 底层DIV（用于遮挡其他元素）
var mask = document.createElement("div")
mask.id = "login_mask"
setStyle(mask, 'left', 0)
setStyle(mask, 'top', 0)
setStyle(mask, 'background', '#000000')
setStyle(mask, 'width', pageWidth+'px')
setStyle(mask, 'height', pageHeight+'px')
setStyle(mask, 'position', 'absolute')
setStyle(mask, 'filter', 'Alpha(opacity=40)')
setStyle(mask, '-moz-opacity', '0.4')
setStyle(mask, 'opacity', '0.4')
setStyle(mask, 'zIndex', 100)
// 底层ifreme（用于挡住select下拉框等普通DIV无法遮挡的元素）
var iframe = document.createElement("iframe")
iframe.id = "login_iframe"
setStyle(iframe, 'left', 0)
setStyle(iframe, 'top', 0)
setStyle(iframe, 'background', '#000000')
setStyle(iframe, 'width', pageWidth+'px')
setStyle(iframe, 'height', pageHeight+'px')
setStyle(iframe, 'position', 'absolute')
setStyle(iframe, 'filter', 'Alpha(opacity=0)')
setStyle(iframe, '-moz-opacity', '0')
setStyle(iframe, 'opacity', '0')
setStyle(iframe, 'zIndex', 99)
document.body.appendChild(iframe)
document.body.appendChild(mask)
// 弹出DIV
var popDiv = document.createElement("div")
var popTop = 100
var popLeft = 100
setStyle(popDiv, 'left', '100px')
setStyle(popDiv, 'top', '200px')
setStyle(popDiv, 'width', '300px')
setStyle(popDiv, 'height', '200px')
setStyle(popDiv, 'background', '#FFF')
setStyle(popDiv, 'zIndex', 1000)
setStyle(popDiv, 'display', 'block')
setStyle(popDiv, 'position', 'absolute')
document.body.appendChild(popDiv)
}
function getWindowSize() {
var client = {
x:0,
y:0
}
if(typeof document.compatMode != 'undefined' &&document.compatMode == 'CSS1Compat') {
client.x = document.documentElement.clientWidth
client.y = document.documentElement.clientHeight
} else if (typeof document.body != 'undefined') {
client.x = document.body.clientWidth
client.y = document.body.clientHeight
}
return client
}
function getDocumentSize() {
var doc = {
x:0,
y:0
}
doc.x = document.body.scrollWidth
doc.y = document.body.scrollHeight
return doc
}
function setStyle(element, key, value) {
element.style[key] = value
}
</script>
<body onload="init()">
这是因为弹出的DIV写到了这个右边的父DIV中，这个右边的DIV，有position:relative那么弹出层的父节点就是右边的那个列表DIV了
这样弹出层的TOP,LEFT就是相对列表DIV开始计算初始高度。
1. 把弹出的DIV，写到做外面，也就是写道BODY标签下的最外层。
<body>
<div id="overlay"></div>// overlay就是弹出层
2. 把右边列表的DIV的position:relative值去掉。
