制作支付页面弹框html,JS实现仿微信支付弹窗功能_蜡烛_前端开发者

先奉上效果图

2ea09c8137f5e5f91187d014186316e5.png

/p>

body {

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;

-webkit-animation-duration: 0.4s;

animation-name: slideIn;

animation-duration: 0.4s

}

/**

* 支付弹窗样式

* **/

.paymentArea-Entry {

width: 90%;

margin: 0 auto;

padding-bottom: 0.3rem;

background-color: #fff;

}

.paymentArea-Entry-Head {

display: flex;

display: -webkit-flex;

height: 0.8rem;

line-height: 0.8rem;

padding: 0.2rem;

border-bottom: 1px solid #5CB85C;

}

/* 关闭按钮 */

.paymentArea-Entry-Head .close {

width: 0.5rem;

height: 0.5rem;

padding: 0.15rem 0.15rem 0.15rem 0;

}

.paymentArea-Entry-Head .close:hover,

.paymentArea-Entry-Head .close:focus {

color: #000;

text-decoration: none;

cursor: pointer;

}

.paymentArea-Entry-Head .useImg {

width: 0.8rem;

height: 0.8rem;

margin-right: 0.15rem;

}

.paymentArea-Entry-Head .tips-txt {

font-size: 0.4rem;

}

.paymentArea-Entry-Content {

position: relative;

padding: 0.2rem 0;

text-align: center;

}

.paymentArea-Entry-Content:after {

content: "";

position: absolute;

bottom: 0;

left: 0.3rem;

right: 0.3rem;

height: 1px;

background-color: #ddd;

}

.paymentArea-Entry-Content .pay-name {

font-size: 0.3rem;

}

.paymentArea-Entry-Content .pay-price {

font-size: 0.4rem;

font-weight: bold;

}

ul.paymentArea-Entry-Row {

display: flex;

display: -webkit-flex;

justify-content: space-between;

margin: 0.2rem 0.3rem 0 0.3rem;

padding: 0;

border: 1px solid #a2a2a2;

}

ul.paymentArea-Entry-Row li {

position: relative;

flex-grow: 1;

min-width: 1rem;

height: 0.8rem;

line-height: 0.8rem;

text-align: center;

border-right: 1px solid #ddd;

}

ul.paymentArea-Entry-Row li:last-child {

border-right: 0;

}

ul.paymentArea-Entry-Row li img {

position: absolute;

top: 50%;

left: 50%;

width: 0.5rem;

height: 0.5rem;

margin: -0.25rem 0 0 -0.25rem;

}

.paymentArea-Keyboard {

margin-top: 1.2rem;

background-color: #fff;

}

.paymentArea-Keyboard h4 {

height: 0.5rem;

line-height: 0.5rem;

margin: 0;

text-align: center;

}

.paymentArea-Keyboard h4 img {

width: 0.93rem;

height: 0.32rem;

margin: 0 auto;

}

.paymentArea-Keyboard h4:active {

background-color: #e3e3e3;

}

.paymentArea-Keyboard ul {

border-top: 1px solid #ddd;

}

.paymentArea-Keyboard li {

display: flex;

display: -webkit-flex;

justify-content: space-between;

border-bottom: 1px solid #ddd;

}

.paymentArea-Keyboard li a {

flex-grow: 1;

display: block;

min-width: 1rem;

line-height: 1rem;

border-right: 1px solid #ddd;

font-size: 0.3rem;

text-align: center;

text-decoration: none;

color: #000;

}

.paymentArea-Keyboard li:last-child,

.paymentArea-Keyboard li a:last-child {

border: 0;

}

.paymentArea-Keyboard li a:active {

outline: none;

background-color: #ddd;

}

/* 添加动画 */

@-webkit-keyframes slideIn {

from {

bottom: -300px;

opacity: 0

}

to {

bottom: 0;

opacity: 1

}

}

@keyframes slideIn {

from {

bottom: -300px;

opacity: 0

}

to {

bottom: 0;

opacity: 1

}

}

@-webkit-keyframes fadeIn {

from {

opacity: 0

}

to {

opacity: 1

}

}

@keyframes fadeIn {

from {

opacity: 0

}

to {

opacity: 1

}

}

//定义根目录字体大小,通过rem实现适配

document.addEventListener("DOMContentLoaded", function() {

var

总结

以上所述是小编给大家介绍的开发者网站的支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/551258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为二层创建vlan_二层交换机不同VLAN实现互通 (华为)

1 ,实验名称:二层交换机不同VLAN实现互通 (华为)2,实验环境:(1)PC1 PC2(2)二层交换机两台(3)三层交换机一台(路由功能)3,实验拓扑:2 配置步骤:(1)配置PC1:IP :192.168.10…

html 360不识别,html 为什么在ie里显示正常在360浏览器不正常呢?

匿名用户1级2016-07-19 回答需要ie和webkit类浏览器兼容css:.search_box {position: relative;width: 360px;overflow: visible;}.search_box * {margin: 0;padding: 0;list-style: none;font: normal 12px/1.5em "宋体", Verdana, Lucida, Arial, Helvet…

主板24pin接口详图_【图解】主板连线接口最详尽图文解释

【图解】主板连线接口最详尽图文解释我为人人,公益分享!论坛地址:chayunyx.uueasy.cn本文结构:一、认识主板供电接口图解安装详细过程二、认识CPU供电接口图解安装详细过程三、认识SATA串口图解SATA设备的安装四、认识PATA并口图解…

matlab 判断鼠标按下_轻巧可爱,支持多设备——雷柏Ralemo Air1乐萌鼠标

手机可以连接显示器,变成桌面系统,iPadOS支持鼠标操作,越来越多的智能设备都可以做到轻办公的使用需求,而办公必不可少就是鼠标,如果说为了每个设备都配个鼠标未免有点太过奢侈,今天介绍一款造型独特&#…

电子科学与技术与计算机专业,计算机科学与技术专业和电子科学与技术专业,哪个好些?...

作为计算机科学与技术专业的学生,这个必须怒答一波,其他学校我是不清楚,就我们学校,我们专业简直比电子科学与技术好太多。先说说培养方案吧计算机科学与技术:本专业培养具有良好的科学素养,系统掌握计算机科学与技术,…

商品进销差价_商品进销差价概述

借:商品进销差价贷:主营业务成本(1)正确计算已销商品进销差价,存货金额减去商品进销差价就是企业存货的购进成本。本科目应按商品类别或实物负责人设置明细账,明细账通常用三栏式账页。用进销差价法核算的,本月已售商品…

html中ng-src,angularjs – 在ng-src中使用{{}}绑定,但不会加载ng-src

我一直在试图绑定一个值到ng-src的img HTML元素无效。AngularJS代码:app.controller(footerCtrl,function($scope,userServices){$scope.avatar_url;$scope.$on(updateAvatar,function(){$scope.avatar_url userServices.getAvatar_url();});}app.factory(userServ…

kafka topic 一段时间不消费_全网最通俗易懂的 Kafka 入门

众所周知,消息队列的产品有好几种,这里我选择学习Kafka的原因,无他,公司在用。我司使用的是Kafka和自研的消息队列(Kafka和RocketMQ)改版,于是我就想学学Kafka这款消息队列啦。本篇文章对Kafka入门,希望对大…

微型计算机技术及应用 考试,陕西理工学院微型计算机技术及应用考试试卷(5份)...

内容简介:陕西理工学院微型计算机技术及应用考试试卷1一、单项选择题。1、微型计算机中主要包括有( )。A、微处理器、存储器和I/O接口 B、微处理器、运算器和存储器C、控制器、运算器和寄存器组 D、微处理器、运算器和寄存器2、指令( )的源操作数的寻址方式为直接寻…

cups源码下载 linux_【正点原子FPGA连载】第九章Linux显示设备的使用-领航者ZYNQ之linux开发指南...

1)实验平台:正点原子领航者ZYNQ开发板2)平台购买地址:https://item.taobao.com/item.htm?&id6061601087613)全套实验源码手册视频下载地址:http://www.openedv.com/docs/boards/fpga/zdyz_linhanz.htm…

河北微型计算机原理专接本,河北省专接本(微机原理与接口技术知识点总结)

它们的差别在于对负数的表示。第一章概述(1)原码一、计算机中的数制定义:1、无符号数的表示方法:符号位:0 表示正,1 表示负;(1)十进制计数的表示法数值位:真值的绝对值。特点:以十为底&#xff…

java程序启动后就进行了7次younggc_程序员如何优化 Java GC

本文由CrowHawk翻译Sangmin Lee发表在Cubrid上的”Become a Java GC Expert”系列文章的第三篇《How to Tune Java Garbage Collection》,本文的作者是韩国人,写在JDK 1.8发布之前,虽然有些地方有些许过时,但整体内容还是非常有价值的。译者此…

html标签名都是小写,到底啥是w3c标准(示例代码)

W3C标准从两年前接触前端的时候,听说了 w3c 标准 ,是w3c(World Wide Web Consortium-世界万维网联盟)组织提出的web标准,印象中这个标准就是,行为(js)、样式(css)、结构(html),相分离。。。仅此而已一直也就是这么以为…

自加一运算_C语言i++、++i混合运算老手未必全掌握,看了你就明白了

C语言中的自增自减运算符(i、i--、i、--i)对于新手来说,通常感到困惑,说来容易算来难,如果涉及到混合运算,更是无法理解。甚至有些学了几年的老手,未必全掌握(也许你忽略了这个问题&…

西工大计算机学院交流,2017西工大计算机交流+精贵资料

我是今年考得西北工业大学计算机图像与语音处理方向,这一年的考研路走的实在艰辛西工大今年的专业课和以往有了很大的不同,首先就是名词解释的取消,网络和操作系统的难度增大,但如果你仔细研读了历年期末考试题,都能看…

rstp 转hls_将RTSP流转为浏览器播放

最近在工作中接触到了一个需求,需要在网页上进行摄像头的实施直播。经过研究,决定采用FFmpeg转RTSP为RTMP流,然后通过SRS转发为HLS流供浏览器播放。前提条件Linux服务器一台(用于搭建SRS环境)FFmpeg(用于讲RTSP流转为RTMP流)SRS(用于将RTMP流…

计算机网络运输层的概述,计算机网络_运输层

运输层协议概述从通信和信息处理的角度看,运输层向它上面的应用层提供通信服务,它属于面向通信部分的最高层,同时也是用户功能中的最低层。当网络的边缘部分中的两个主机使用网络的核心部分的功能进行端到端的通信时,只有位于网络…

ble 连接成功后找不到服务_闷声发大财的BLE芯片龙头

来源:内容由半导体行业观察(ID:icbank)原创,作者:邱丽婷,谢谢。你有多久没使用过蓝牙功能了?随着Wi-Fi和快传软件的普及,蓝牙(Bluethooth)这一每部…

计算机管理关机在哪,电脑点了关机为什么却关不了

近期,一些网友留言说明明电脑已经按照正常步骤关机,但显示屏却关了,但是主机似乎还在运行,这时该怎么办?针对此疑问,下面小编和大家详细说明一下电脑点了关机却关不了的处理方法,感兴趣的用户一…

foreach lambda写法_Java8新特性之forEach+Lambda 表达式遍历Map和List

这是Java8系列的第二篇&#xff0c;今天来说一下Java8中forEach的简单使用。我们使用对比的方式来看应该会看得更加清楚,更能理解&#xff1a;一、遍历MapJava8之前的方式Map items new HashMap<>();items.put("A", 10);items.put("B", 20);items.p…