html中添加支付弹框,JS如何实现仿微信支付弹窗功能

JS如何实现仿微信支付弹窗功能

发布时间：2021-04-20 11:10:50

来源：亿速云

阅读：74

作者：小新

这篇文章将为大家详细讲解有关JS如何实现仿微信支付弹窗功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

先奉上效果图

html代码html>

仿手机微信支付输入密码界面效果

去支付

               

               

请输入支付密码

测试商品

￥88.88

               

• 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;