首页 > 单击事件设置的弹出模块点击闪现后消失?

单击事件设置的弹出模块点击闪现后消失?

(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一直存在直到跳出以下界面。

以下图片消失后,全部消失。

【热门文章】
【热门文章】