javascript - 单击事件设置的弹出模块点击闪现后消失?
ringa_lee
ringa_lee 2017-04-11 12:18:24
[JavaScript讨论组]

(function () {

function MaskLayer(showp,closebtn) {

    this.showp=showp;
    this.closebtn=closebtn;
}
MaskLayer.prototype.load=function(showp,closebtn){
    
    //确定遮罩层的宽度和高度,像maskLayer传入type控制其模式。

    var height=ZX.getBrowerAllSize().height,
        width=ZX.getBrowerAllSize().width;

    if(!ZX.$("maskLayer")){
        var oMaskLayer=document.createElement('p');
            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;
    
    showp=ZX.$(this.showp);
    if(showp){
        showp.style.display="block";
        showp.style.left=(width-showp.offsetWidth)/2+"px";
        showp.style.top=(ZX.getBrowerSize().height-showp.offsetHeight)/2 +"px";
    }
    console.log(showp);
    
    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代码



弹出层


点击链接




库文件

(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然后也尝试了断点调试,断点调试有两种情况,一种的p闪现后消失,一种是p一直存在直到跳出以下界面。

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

ringa_lee
ringa_lee

ringa_lee

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号