这是一个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="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 -->
提示框代码
实际效果如图所示：
实例地址：
www.swack.cn