mvc框架的代码——实现弹窗的封装+应用——基础积累
2023-12-22 12:20:03
最近同事在写一个mvc框架的代码,其中要封装一个弹窗组件,效果图还是很优美的,在此进行一下代码的记录。
最后的实现代码如下:
1.弹窗的打开
ToolsNew.showAltBox({
title: '提示', width: '520px', boxClass: 'boxSetPayInfo',
loadFunc: function () {
filterInput()
$(".boxSetPayInfo").addClass('showPaySet');
$(".boxSetPayInfo .ncPayment").addClass('show');
//免密额度
$("#pwdPayAmount").val(NoPwdPayAmount);
//是否开启自动扣款
$(".boxSetPayInfo .boxCheckboxTF.s1").click(function () {
if ($(this).hasClass('ck')) {
$(this).removeClass('ck');
} else {
$(this).addClass('ck');
}
})
//默认勾选项
if (IsAllowProxyPay == 'True') {
$(".boxSetPayInfo .boxCheckboxTF.s1").addClass('ck');
}
else if (IsAllowProxyPay == 'False') {
$(".boxSetPayInfo .boxCheckboxTF.s1").removeClass('ck');
}
//验证
ToolsNew.fnSecurityValidate('setPwdPayAmount');
$(".boxSetPayInfo .bnSubmit").click(function () {
var isCKTF_s1 = $(".boxSetPayInfo .boxCheckboxTF.s1").hasClass('ck');
var isAllow = isCKTF_s1? 1 : 0;
if (!$(".boxPayVerification").hasClass('over')) {
layer.alert('请先通过安全验证', { title: "提示", icon: 2, })
return false;
}
$(".boxSetPayInfo .box").append('<div class="boxloading fx bw c"><span></span></div>');
var pwdPayAmount = $("#pwdPayAmount").val();
var that = $(this);
$.ajax({
type: "POST",
url: '/Member/SetNoPwdPayAmount',
data: { isAllowProxyPay: isAllow, amount: pwdPayAmount },
success: function (data) {
resSetPwdPayAmount(that,data,isAllow,pwdPayAmount);
}
});
})
},
content: '<div class="ncPayment"><div class="nt">免密支付额度</div><div class="nc1"><input type="number" class="noNubUN" id="pwdPayAmount" value=""><span>元</span></div></div><div class="t"><span>允许平台使用余额或者信用额度自动扣款并完成订单支付</span><div class="boxCheckboxTF s1"></div></div><div class="boxPayVerification noHide"></div>',
bnHtml: '<div class="bn right"><span class="bnsa sk close"><span>取消</span></span><span class="bnsa sk bnSubmit"><span>确定</span></span></div>',
});
根据上面的代码可以看到:ToolsNew
是弹窗组件的实例,可以通过showAltBox
来展示弹窗组件,弹窗组件中的属性有:title
:标题,width
:宽度,boxClass
:class类名,loadFunc
:回调函数,content
:弹窗内容区域,btnHtml
:底部按钮
2.弹窗的关闭
ToolsNew.hidShowAltBox(that.parents('.showAltBox').attr('id'));
ToolsNew函数的封装
var ToolsNew = {
//公共弹窗
// {
// ★title 标题
// ★titIcon 标题图标(s/e/w)
// ★content 内容/html
// ★nClass 内容class
// ★bn 按钮[{target,class,link,txt}]
// ★width 宽度
// ★loadFunc 加载完成后执行
// }
showAltBox:function (data){
var boxClass = data.boxClass||'';
var showAltID = data.boxId||'box_' + new Date().getTime();
var title = data.title||'';//标题
var icon = data.icon||'';
var titleHtml = title?'<div class="tit '+icon+'"><b>'+title+'</b></div>':'';
var content = data.content||'';
var nClass = data.textCenter?'textCenter':'';
var contentHtml = titleHtml+'<div class="n '+nClass+'">'+content+'</div>';
var width = data.width||'400px';
var bnHtml = '';
if (data.bnHtml){
bnHtml = data.bnHtml;
}else if (data.bn && data.bn.length){
for (let i in data.bn){
var tsBn = data.bn[i];
var target = tsBn.target?' target="'+tsBn.target+'"':'';
var bnInfo = ' class="bnsa sk '+tsBn.class+'"'+target+' href="' + tsBn.link + '"><span>' + tsBn.txt + '</span>';
bnHtml += tsBn.link ? '<a'+bnInfo+'</a>':'<span'+bnInfo+'</span>';
}
}
contentHtml += bnHtml;
$("body").append('<div class="showAltBox '+boxClass+'" id="'+showAltID+'"><div class="box" style="width:'+width+'"><i class="close"></i>'+contentHtml+'</div></div>')
ToolsNew.readyShowAltBox(showAltID);
if (typeof data.loadFunc == 'function') data.loadFunc();
},
readyShowAltBox:function (id) {
setTimeout(function () {
$(".showAltBox#" + id).addClass('show');
}, 100)
$(".showAltBox .close,.showAltBox .boxClose").click(function () {
ToolsNew.hidShowAltBox($(this).parents('.showAltBox').attr('id'));
});
},
hidShowAltBox:function (id) {
$(".showAltBox#" + id).removeClass('show');
setTimeout(function () {
$(".showAltBox#" + id).remove();
}, 300)
},
//安全验证
fnSecurityValidate:function (codeType){
var userMobileHide = $('#userMobileHide').attr('data-value');
$(".boxPayVerification").append(`
<div class="t">安全验证</div>
<div class="n">
<ul class="listSelHD">
<li><label><span>密码验证</span><input name="securityValidateType" type="radio" value="2"><i></i></label></li>
<li><label><span>短信验证</span><input name="securityValidateType" type="radio" value="1"><i></i></label></li>
</ul>
<div class="listSelDB">
<div class="on">
<div class="hasPayPwd"><div class="boxCaptchaContainer" iptType="number" type="password" id="password" maxNumFunc="ToolsNew.fnPayValidate()"></div></div>
<div class="hasPayPwd txt"><span class="link" οnclick="ToolsNew.fnGoCPP()">重置密码</span></div>
<div class="noPayPwd txt"><span class="link" οnclick="ToolsNew.fnGoCPP()">设置您的支付密码</span></div>
</div>
<div>
<div class="txt">手机号:${userMobileHide}</div>
<div class="isGetMC"><div class="boxCaptchaContainer" iptType="number" type="number" id="vCode" maxNumFunc="ToolsNew.fnPayValidate()"></div></div>
<button type="button" class="bnsa sk white b" id="bnGetMC" οnclick="ToolsNew.getMobileCode('${codeType}')"><span>获取验证码</span></button>
</div>
</div>
</div>
<div class="boxloading load fx c bw ov"><span></span></div>`);
ToolsNew.addBoxCCInput();
//选择安全验证类型
$("input[name='securityValidateType']").change(function() {
// $("#vCode input,#password input").val('');
// $(".btn-buy").attr("disabled", true);
var index = $(this).parents('li').index();
$(this).addClass('on').siblings().removeClass('on');
$(this).parents('.listSelHD').siblings('.listSelDB').children('div').eq(index).addClass('on').siblings().removeClass('on');
var ckVal = $("input[name='securityValidateType']:checked").val();
var hasPayPwd = $("#hasPayPwd").attr('data-value');
if (ckVal==1){
$("#vCode input").val('');
$("#vCode input:first").focus();
}
if (ckVal == 2 && hasPayPwd == 'True'){
$(".hasPayPwd").show();
$(".noPayPwd").hide();
$("#password input").val('');
$("#password input:first").focus();
}else if (ckVal == 2 && hasPayPwd != 'True'){
$(".hasPayPwd").hide();
$(".noPayPwd").show();
}
})
//默认选项
var securityValidateType = ToolsNew.getUrlParam('vt');
if (securityValidateType) {
$("input[name='securityValidateType'][value='" + securityValidateType + "']").click();
} else {
$("input[name='securityValidateType'][value='2']").click();
}
},
}
文章来源:https://blog.csdn.net/yehaocheng520/article/details/135148048
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!