js弹出层弹出微信扫描的效果javascript
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(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="/uploads/image/20200729//20200729142956_509610.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>
用到的图片：
下一篇：js双日历选择一段范围内的日期
我要评论