Jitao's tweets

- Record something
首页 / 网页建站 / 正文

微信二维码关注弹出效果

2019-04-26 网页建站 61 ℃ 0 评论
<style type="text/css">
.weixindiag{position:absolute;height:auto;z-index:90001;padding:1px; display:none; width:235px; background-color:none;}
.weixindiag img{ border-radius:5px;}
.weixinclose{background:url(http://www.daixiaorui.com/Public/images/weixinclose.png) no-repeat; width:38px; height:38px; display:inline-block; margin-bottom:-50px; cursor:pointer; margin-bottom:-38px; z-index:999; position:absolute;right:-18px; top:-18px;}
.overlay{background-color:#252525;position:absolute;z-index:90000;left:0;top:0;width:100%;height:100%;opacity:0.7;filter: alpha(opacity=70);-moz-opacity: 0.5; display:none;}
</style>
<!--不要忘了引入jquery库哦-->
<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<script type="text/javascript">
//微信
$(function(){
$(".weixin").click(function(){
$(".overlay").css({display:"block",height:$(document).height()});
$(".weixindiag").css({
left:($("body").width()-$(".weixindiag").width())/2+"px",
top:($(window).height()-$(".weixindiag").height())/2+$(window).scrollTop()+"px",
display:"block"
});
});

$(".weixinclose").click(function(){
$(".overlay,.weixindiag").css("display","none");
return false;
});
})
</script>
</head>

<body>
<div class="overlay"></div>
<div class="weixindiag"><a class="weixinclose"></a> <img src="weixin.png" width="235" height="235" alt="" /></div>
<script type="text/javascript">
//Just for full screen
for(i=0;i<1;i++){
document.write('<a href="#" class="weixin"> 关注微信</a>@ daixiaorui.com');
}
</script>


0

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论