html中移动端遮罩层,移动端微信分享弹出遮罩层js效果_蓝戒的博客

css部分：

.btonshare{ width:80%; height:50px; float:left; background:#16bb5c; margin:0 10%; margin-top:15px;text-align:center; color:#fff; line-height:50px; border-radius:10px;}

#cover{display:none;position:absolute;left:0;top:0;z-index:18888;background-color:#000000;opacity:0.7;}

#guide{display:none;position:absolute;right:18px;top:5px;z-index:19999;}

#guide img{width:260px;height:180px;}

html部分：

分享

(弹出层上的操作位置指向图片)

js部分：

var _system={

$:function(id){return document.getElementById(id);},

_client:function(){

return {w:document.documentElement.scrollWidth,h:document.documentElement.scrollHeight,bw:document.documentElement.clientWidth,bh:document.documentElement.clientHeight};

},

_scroll:function(){

return {x:document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft,y:document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop};

},

_cover:function(show){

if(show){

this.$("cover").style.display="block";

this.$("cover").style.width=(this._client().bw>this._client().w?this._client().bw:this._client().w)+"px";

this.$("cover").style.height=(this._client().bh>this._client().h?this._client().bh:this._client().h)+"px";

}else{

this.$("cover").style.display="none";

}

},

_guide:function(click){

this._cover(true);

this.$("guide").style.display="block";

this.$("guide").style.top=(_system._scroll().y+5)+"px";

window.οnresize=function(){_system._cover(true);_system.$("guide").style.top=(_system._scroll().y+5)+"px";};

if(click){_system.$("cover").οnclick=function(){

_system._cover();

_system.$("guide").style.display="none";

_system.$("cover").οnclick=null;

window.οnresize=null;

};}

},

_zero:function(n){

return n<0?0:n;

}

}