AIPlatform/src/js/modal.js

const jQuery = require('jquery');

(function ($) {
    let close = require("../images/icon_close_default.png")
    let suc = require("../images/success.png")
    let loadingImg = require("../images/loading.gif")
    $.alerModal = function (options) {
        var dft = {
            sureBtn:true,
            quiteBtn:false,
            width:"400",
            title:"标题",
            sureText:"确定",
            message: '<p class="tip">内容</p>',
            time: 1500,
            isFather: false,
            fatherWrapper:'',
            type:'modal',//tip,loading
            callback:function(){
                alert(99)
            }
        };
        var ops = $.extend(dft, options || {});
        var html = `
            <div class="alertModal">
                <div class="modalBg"></div>
                <div class="modalMain" style="width:${ops.width}px;margin-left:-${ops.width/2}px">
                <p class="title">${ops.title} <img src="${close}" alt=""></p>
                <div class="content">
                    ${ops.message}
                </div>
                <div class="btns clearfix">
                    <span class="quite" style="display:${ops.quiteBtn?'inlineBlock':'none'}">取消</span>
                    <span class="sure sureChange" style="display:${ops.sureBtn?'inlineBlock':'none'}">${ops.sureText}</span>
                </div>
                </div>
            </div>
        `
        // var tip = `
        //     <div class="modaltip">${ops.message}</div>
        // `
        var tip = `
            ${ops.win?`
            <div class="modaltipSuc">
                <img src="${suc}" />
                ${ops.message}
            </div>`:`
            <div class="modaltip">
                ${ops.message}
            </div>`}
        `
        var loading = `
            <div class="loading"><img src="${loadingImg}" alt=""></div>
        `
        var box = $("<div/>",{
            "class":"divModal",
            "html":ops.type == 'tip'?tip:ops.type == 'loading'?loading:html
        }).css({
            left:$(".modaltip").width()/2+'px',
            top:$(".modaltip").height()/2+'px'
        })
        if(ops.isFather){
            //console.log('bbbbbbb')
           ops.fatherWrapper.append(box)
        } else{
            $("body").append(box)
        }
        if(ops.type == 'tip'){
            setTimeout(function(){
                box.remove();
            }, ops.time);
        }
        $(document).on('click',".alertModal .title img",function(){
            box.remove();
        })
    }
})(jQuery);