JS如何实现仿微信支付弹窗功能
发布时间:2021-04-20 11:10:50
来源:亿速云
阅读:74
作者:小新
这篇文章将为大家详细讲解有关JS如何实现仿微信支付弹窗功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
先奉上效果图
html代码html>
仿手机微信支付输入密码界面效果去支付
请输入支付密码
1
2
3
4
5
6
7
8
9
清空
0
删除
cssbody {
margin: 0;
padding: 0;
font-size: 0.3rem;
font-family: "微软雅黑", arial;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
display: block;
}
#myBtn {
display: block;
width: 80%;
height: auto;
margin: 5rem auto;
padding: 0.2rem;
border-radius: 5px;
border: 0;
outline: none;
font-family: "微软雅黑";
color: #fff;
background-color: #5CB85C;
}
/* 弹窗 */
.modal {
display: none;
/* 默认隐藏 */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* 弹窗内容 */
.modal-content {
position: fixed;
bottom: 0;
/*background-color: #fefefe;*/
width: 100%;
-webkit-animation-name: slideIn;