小言_互联网的博客

场景类:jquery弹框

317人阅读  评论(0)
var $ = require('jquery');
exports.freeDomConfirm = function (config) {
    var confirmConfig = null;
    var confirmConfig = {
        styleType: (config && config.styleType)? config.styleType: '',
        title: (config && config.title)? config.title: '',
        msg: (config && config.msg)? config.msg: '',
        dom: (config && config.dom)? config.dom: '',
        btn: (config && config.btn)? config.btn: []
    }
    var btn = '';
    for (let i = 0; i < confirmConfig.btn.length; i++) {
        let btnTpl = `<a href="${confirmConfig.btn[i].value}" data-index="${i}" data-num="${confirmConfig.btn[i].num}" class="confirm__btn ${confirmConfig.btn[i].cls}">${confirmConfig.btn[i].text}</a>`
        btn = btn + btnTpl;
    }
    var tpl = `<div class="confirm__mask-new"></div>
                <div class="dialog-confirm-new ${confirmConfig.styleType}">
                    <div class="confirm__inner"> 
                        <div class="confirm__title">${confirmConfig.title}</div>
                        <div class="confirm__msg">${confirmConfig.msg}</div>
                        ${confirmConfig.dom}
                        <div class="confirm__con">
                            <div class="confirm__action">${btn}</div> 
                        </div> 
                    </div> 
                </div>` ;
    $("body").off('click', '.confirm__btn');
    $('body').on('click', '.confirm__btn', function () {
        let btnIndex = $(this).attr('data-index');
        if (!config.btn[btnIndex].click){
            return;
        }
        config.btn[btnIndex].click(config.btn[btnIndex].agmt);
        $('.dialog-confirm-new').hidden();
        $('.dialog-confirm-new').remove();
        $('.confirm__mask-new').remove();
        $('body').off('click', '.confirm__btn'); 
    });
    $('body').append(tpl);
    $('.close-dialog').on('click', function () {
        $('.dialog-confirm-new').remove();
        $('.confirm__mask-new').remove();
    });
}
// 调用
var Dialog = require("./freeDomConfirm.js");
Dialog.freeDomConfirm({
    // title: '标题',
    styleType: 'add_ntid',
    dom:`<form id="ntidForm">
            <div class="confirm__input">
                <input type="text" class="j_confirm__input" name="" id="">
            </div>
            <div class="confirm__msg">说明</div>
            <div class="confirm__input">
                <input type="text" class="j_explain__input" name="" id="">
            </div>
        </form>`,
    msg: 'REXIS CODE',
    btn: [{
        value: 'javascript:;',
        text: '取消',
        cls: 'close-dialog'
    },{
        value: 'javascript:;',
        text: '不通过',
        cls: 'rexis_cancel'
    },{
        value: 'javascript:;',
        text: '通过',
        cls: 'rexis_sure'
    }]
})

转载:https://blog.csdn.net/weixin_43972437/article/details/101297709
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场