mvc框架的代码——实现弹窗的封装+应用——基础积累

最近同事在写一个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();
        }
    },
}