(function () {
function MaskLayer(showDiv,closebtn) {
this.showDiv=showDiv;
this.closebtn=closebtn;
}
MaskLayer.prototype.load=function(showDiv,closebtn){
//确定遮罩层的宽度和高度,像maskLayer传入type控制其模式。
var height=ZX.getBrowerAllSize().height,
width=ZX.getBrowerAllSize().width;
if(!ZX.$("maskLayer")){
var oMaskLayer=document.createElement('div');
oMaskLayer.id="maskLayer";
oMaskLayer.style.height=height+"px";
oMaskLayer.style.width=width+"px";
oMaskLayer.style.display="block";
document.body.appendChild(oMaskLayer);
}else{
var oMaskLayer=ZX.$("maskLayer");
oMaskLayer.style.display='block';
}
//弹出模块
//弹出模块通过HTML创建,CSS设置样式,默认display:none;
showDiv=ZX.$(this.showDiv);
if(showDiv){
showDiv.style.display="block";
showDiv.style.left=(width-showDiv.offsetWidth)/2+"px";
showDiv.style.top=(ZX.getBrowerSize().height-showDiv.offsetHeight)/2 +"px";
}
console.log(showDiv);
return false;
}
MaskLayer.prototype.unload=function(){
$('maskLayer').style.display='none';
}
window['ZX']['masklayer']=MaskLayer;
})();
var mask=new ZX.masklayer('popUp','');
ZX.addEvent('clickbtn-mask',"click",ZX.bindFunction(mask,mask.load));
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出层</title>
<link rel="stylesheet" type="text/css" href="css/mask.css">
</head>
<body>
<a id="clickbtn-mask" href="">点击链接</a>
<div id="popUp">
</div>
<script type="text/javascript" src="ZX-final.js"></script>
<script type="text/javascript" src="js/mask.js"></script>
</body>
</html>
库文件
(function() {
//如果命名空间不存在,创建命名空间
if(!window['ZX']){
window['ZX']={};
}
function $(id){
return document.getElementById(id);
}
window['ZX']['$']=$;
//事件注册
function addEvent(node,type,fn){
if(!(node =$(node) )) return false;
if(node.addEventListener){
node.addEventListener(type,fn,false);
return true;
}else if(node.attachEvent){
node.attachEvent("on"+type,fn);
return true;
}
return false;
}
window['ZX']['addEvent']=addEvent;
//事件移除
function removeEvent(node,type,fn){
if(!(node ==$(node))) return false;
if(node.removeEventListener){
node.removeEventListener(type,fn,false);
}else if(node.attachEvent){
node.attachEvent("on"+type,fn);
}
}
window['ZX']['removeEvent']=removeEvent;
function getBrowerSize(){
var de=document.documentElement;
return{
'width':(window.innerWidth
|| (de && de.clientWidth)
|| document.body.clientWidth),
'height':(window.innerHeight
|| (de && de.clientHeight)
|| document.body.clientHeight)
}
}
window['ZX']['getBrowerSize']=getBrowerSize;
function getBrowerAllSize(){
var width=document.documentElement.scrollWidth || document.body.scrollWidth,
height=document.documentElement.scrollHeight || document.body.scrollHeight,
heightAuto=getBrowerSize().height;
if(height>heightAuto){
return{
'width':width,
'height':height
}
}else{
return{
'width':width,
'height':heightAuto
}
}
}
window['ZX']['getBrowerAllSize']=getBrowerAllSize;
function bindFunction(obj,func){
return function(){
func.apply(obj,arguments);
}
}
window['ZX']['bindFunction'] = bindFunction;
})();
说明:原来遇到这种情况,有人说是js阻塞,return一下就好。这回加上return然后也尝试了断点调试,断点调试有两种情况,一种的div闪现后消失,一种是div一直存在直到跳出以下界面。
以下图片消失后,全部消失。