HTML5 微信二维码提示框
2024-09-30 01:37:26
这是一个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
最新文章
- linq之将IEnumerable<;T>;类型的集合转换为DataTable类型 (转载)
- iOS 键盘类型
- EasyDarwin不能保存HLS列表的解决方案
- android版高仿淘宝客户端源码V2.3
- nyoj 364 田忌赛马(贪心)
- adb通信原理分析
- 3 javascript
- DIV的垂直居中
- ngnix 一 入门指南
- [Math]Reverse Integer
- poj3254Corn Fields题解
- 九度oj题目&;amp;吉大考研11年机试题全解
- 【无旋式treap】例题
- Python 对象引用、可变性和垃圾回收
- (转)C语言malloc()与free()的使用
- iOS iCloud云存储数据
- springboot整合mybatis出现的一些问题
- Hystrix 框架
- Kafka 之 入门
- [莫队算法 线段树 斐波那契 暴力] Codeforces 633H Fibonacci-ish II