现在的位置: 首页 -> 前端学习 -> JS前端 -> js弹出层弹出微信扫描的效果

js弹出层弹出微信扫描的效果

2013-12-12 00:25评论数 0 ⁄ 被浏览 15677 views+

js点击一个按钮,弹出一个层,并遮住网页后面的内容,使之为半透明状。这种效果用的很多,比如论坛登陆、签到时候的弹出层,比如现在流行的微信扫一扫,点击一个按钮时候的弹出层。如下面的这种效果:


js弹出层


js弹出层源码:


js弹出层,js遮住层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js弹出层,js遮住层</title>

<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(https://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="https://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<1000;i++){

document.write('<a href="#" class="weixin"> 关注微信</a>@ daixiaorui.com');

}

</script>

</body>

</html>

 

文章出自:https://www.daixiaorui.com/read/64.html 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。

目前有 0 条评论  @我要评论

    您的每一个评论都是对我的一份支持

     博客二维码

    昵称 *

    邮箱 *