这是一个js的小案例，主要效果是显示一个微信二维码的提示框，非常简单实用。
源码如下：
JS部分
<script src="js/jquery-1.8.3.min.js"></script>
<style>
*{padding: 0; margin: 0}
.wb-box{
position: fixed;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.8);
display: none;
}
.wb-box1{
width:258px;
height:258px;
position:fixed;
left:50%;
top:25%;
margin-left:-129px;
border:1px solid #000000;
}
.wb-box-text1{
width:258px;
position:fixed;
left:50%;
top:25%;
margin-top:258px;
margin-left:-129px;
text-align:center;
color:#000;
}
.wb-box-text2{
width:auto;
height:auto;
position:fixed;
left:50%;
top:25%;
margin-left:129px;
text-align:center;
background: rgba(255,0,0,0.8);
font-size:25px;
line-height:100%;
padding-top:0px;
}
</style>
</script>
窗体部分：
<a href="javascript:;" onclick="jQuery('.wb-box').show()" class="fa fa-comments"></a>
此段代码用于触发显示提示框事件
<div class="wb-box">
<div class="wb-box1">
<img href="index.html" src="data:images/weixin.jpg" width="258" height="258" />
</div>
<div class="wb-box-text1">
<a style="font-size:20px; font-weight:bold; color:#000000;">关注公众号</a>
</div>
<div class="wb-box-text2">
<a href="javascript:;" onclick="jQuery('.wb-box').hide()" class="close">×</a>
</div>
</div><!-- /wb-box -->
提示框代码
实际效果如图所示：
实例地址：
https://www.swack.net