1.弹出框封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>confirm</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="../css/aui.css">
</head>
<body>
<div>
<button id="a">支付成功</button>
<button id="b">申请会长</button>
<button id="c">信息提示</button>
</div>
<script src="../script/zepto.min.js"></script>
<!--弹框样式-->
<style>
#confirm-box {
font-family: "Helvetica Neue" , "微软雅黑", Helvetica, sans-serif;
100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
z-index: 1;
}
#confirm-box .confirm{
13rem;
margin: 30% auto;
position: relative;
text-align: center;
}
#confirm-box .confirm:before{
content: '';
display: block;
13rem;
height: 3.5rem;
background: url(../image/confirm/a_up_image.png) no-repeat center center;
background-size: 100% 100%;
}
#confirm-box .confirm:after{
content: '';
display: block;
12.5rem;
height: 2.5rem;
background: url(../image/confirm/a_down_image.png) no-repeat center center;
background-size: 100% 100%;
position: relative;
right: -0.65rem;
bottom: 0;
}
#confirm-box .conten-box{
margin-left: 1.2rem;
margin-right: 0.95rem;
background-image: url(../image/confirm/a_middle_image-.png);
background-repeat: repeat-y;
background-size: 100% 100%;
color: #3C0900;
font-size: 0.8rem;
}
#confirm-box .conten-box .close{
2rem;
height: 2rem;
position: absolute;
right: 0.1rem;
top: 0.8rem;
z-index: 15;
}
#confirm-box .firm-title{
position: absolute;
5rem;
height: 1.8rem;
line-height: 1.8rem;
top: .3rem;
left: 50%;
margin-left: -2.4rem;
z-index: 10;
font-weight: 600;
}
#confirm-box .text-box{
100%;
padding: 0 1rem;
max-height: 8rem;
overflow: scroll;
}
#confirm-box .text-box .msg-title{
font-weight: 600;
}
#confirm-box .firm-btn{
height: 2rem;
display: flex;
line-height: 1.6rem;
font-weight: 600;
color: #ffc85b ;
margin: 0 0.8rem;
}
#confirm-box .firm-btn div{
flex: 1;
margin: 0.2rem 0.35rem;
background: url(../image/confirm/a_an_btn.png) no-repeat;
background-size: 100% 100%;
}
</style>
<script>
//函数调用
/*json {} , button [] , function */
function openFirms(json, btn, callback) {
if (json == null || typeof json !== 'object') return;
var json = json || {}, btn = btn || [],
len = btn.length, button = '', str = '',msg = '';
if (len == 0 ){
button = ''
} else if (len == 1) {
button += '<div class="btn-left">'+btn[0]+'</div>'
} else {
button += '<div class="btn-left">'+btn[0]+'</div><div class="btn-right">'+btn[1]+'</div>'
}
if(json.msg != undefined && json.msg != ''){msg=json.msg}
var confirm = $('<div id="confirm-box"></div>');
str += '<div class="confirm"><div class="conten-box"><div class="close"></div>' +
'<div class="firm-title">'+json.title+'</div><div class="text-box"><h3 class="msg-title">'+msg+'</h3>' +
'<span>'+json.text+'</span></div><div class="firm-btn">'+button+'</div></div></div>'
confirm.html(str).show();
$('body').append(confirm);
confirm.on('click',function () {
confirm.remove();
});
confirm.on('click', '.close', function () {
confirm.remove();
});
confirm.on('click', '.firm-btn div', function () {
callback($(this))
confirm.remove();
confirm = null
});
}
/*---------------模拟数据------------------*/
var data = [
{
"title":"支付页面",
"msg":"支付成功",
"text":"支付成功，等待审批等待审批流待审批流程等待审批流程等待审批流程等待审批流程流程待<br>审批流程等待审批流程等待审批流程等待审批流程流程程等待审批流程等待审批流程等待审批流程流程。",
"btn":["取消支付","重新支付"]
},
{
"title":"申请会长",
"msg":"",
"text":"您的申请以提交，等待审批等待审批流程等待审批流程等待审批流程等待审批流程流程。",
"btn":["同意","拒绝"]
},
{
"title":"信息提示",
"msg":"申请成功",
"text":"恭喜申请通过，等待审批等待审批流程等待审批流程等待审批流程等待审批流程流程。",
"btn":["我知道了"]
}
]
$('#a').on('click', function () {
var btn = data[0].btn;
openFirms(data[0],btn,function (btn) {
if(btn.index()){
alert('重新支付')
}else{
alert('取消支付')
}
})
});
$('#b').on('click',function () {
var btn = data[1].btn;
openFirms(data[1],btn,function (btn) {
if(btn.index()){
alert('点击了拒绝')
}else{
alert('点击了同意')
}
})
});
$('#c').on('click',function () {
var btn = data[2].btn;
openFirms(data[2],btn,function (btn) {
alert('我知道了')
})
});
</script>
</body>
</html>
前端大神的代码
数字密码封装
<!DOCTYPE html >
<html lang="en" style="font-size: 20px">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style=" 100vm;height: 100vh;margin: 0;padding: 0">
<button>按钮</button>
<style>
.mask-layer{
100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background: rgba(0,0,0,0.5);
display: none;
}
.mask-layer .pwd-wrap{
12rem;
height: 9rem;
background: #ddd;
position: relative;
top: 50%;
left: 50%;
margin: -4.5rem 0 0 -6rem;
border:15px solid transparent;
box-sizing: border-box;
}
.mask-layer .pwd-title{
height: 1.5rem;
line-height: 1.5rem;
text-align: center;
margin-bottom: 0.5rem;
}
.mask-layer .pwd-colse{
0.8rem;
height: 0.8rem;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAMAAADGxShVAAAAYFBMVEUAAAC/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v79ml6CyAAAAH3RSTlMAZhLMGBXi1CgK2Oi4IQXRvWWwDsKWW/pxT6J/eXBVlokKQQAAAL5JREFUOMuF08sOgyAQheEBsd5apVqt9sb7v2V1QnIW5OC/IYEvrGZEejlreY5WePXXig+hdZkPwixzyBizP3qZiv2oHBVhE7FqSiaMCAwTagaYRMTKwwwlFTCWiGiq/aawXMBkBEwqkFMzERFNqwaCmhWCGQhiIFifQ7RTRpigPZq86GCIMLcLDJsPNb7JCBguork2RDADwQwEqtX0iWAminuyzZ0aJmDGPiNgliiomWWMgpq32Jf/Cc2tm/wBYBof+yzPsXAAAAAASUVORK5CYII=) no-repeat;
background-size: 100% 100%;
position: absolute;
top: -0.5rem;
right: -0.5rem;
}
.mask-layer .pwd-text{
100%;
height: 1.8rem;
position: relative;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhwAAABuBAMAAACepdesAAAALVBMVEX////Ly8vr7O8AAADe3t7w8PDLy8vLy8v9/f35+fnLy8vLy8vLy8vLy8vLy8up1xTVAAAAD3RSTlOZmdYAmZmFNJmZlGZUBAIwJlEAAAABOUlEQVR42u3dsUmDQRzG4VdBsDQbuMNXWFmGWKSwSJcBRMFKsbGxsDEDBCcQFxAXsLYRnMIhjCEcd40gCCfy/Orj4P8s8GYYDq/PRho9PL8Nw4rjanwf5W528sXxMY7WzV5XHC830brd6ZCDo2jT7UXej6NNO+e5jEqTPEWleU6j0jKPUWmRvai0hQPHb3Hs/4nH2/nRzzhw4MCBAwcOHDhw4MCBAwcOHDi6X4gDBw4cOHDgwIEDR/8LceDAgQMHDhw4cODofyEOHDhw4MCBAwcOHP0vxIEDBw4cOHDgwIGj/4U4cODAgQMHDhw4cPS/EAcOHDhw4MCBAweO/hfiwIEDBw4cOP5/OHB8w2FUoG5hcqJuaZCkbm6upm5izKgZMzJ11UxdGUKrmprJa2byjCi2I4omNpuJzU+pPHmnYtoyZwAAAABJRU5ErkJggg==) no-repeat;
background-size: 100% 100%;
overflow: hidden;
line-height: 2rem;
margin: 1rem 0;
}
.mask-layer .pwd-text label{
display: block;
100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
}
#safe-pwd{
100%;
height: 100%;
position: absolute;
opacity: 0;
z-index: -1;
}
.mask-layer .hide-pwd{
100%;
height: 100%;
letter-spacing: 1.3rem;
padding-left: 0.7rem;
}
.mask-layer .pwd-tips{
text-align: right;
font-size: 0.8rem;
}
.mask-layer .pwd-tips a{
color: #686868;
}
</style>
<div class="mask-layer" id="pwd-box">
<div class="pwd-wrap">
<div class="pwd-title">请输入安全密码</div>
<div class="pwd-colse"></div>
<div class="pwd-text">
<label for="safe-pwd"></label>
<input id="safe-pwd" type="tel" maxlength="6">
<div class="hide-pwd"></div>
</div>
<div class="pwd-tips">
<a href="##">忘记密码</a>
</div>
</div>
</div>
<script src="../script/jquery-1.10.2.js"></script>
<script>
$('button').on('click',function () {
$('.mask-layer').show();
$('#safe-pwd').focus();
});
$('#pwd-box').on('click','.pwd-colse',function () {
$('#pwd-box').hide();
$('#safe-pwd').val('');
$('.hide-pwd').text('');
});
$('#safe-pwd').on('input',function () {
var self = $(this),val = self.val(),
l = val.length,next = self.next(),i='',x;
for(x=0;x<l;x++){i+='*'}next.text(i);
if(l == 6){
self.val('');next.text('');$('#pwd-box').hide();
checkPay(val)
}
});
function checkPay(val) {
console.log(val)
}
</script>
</body>
</html>