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 def = require("../images/default.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 radioExp = `<div class='colSetBox'> 
            <div class='mask'></div>
            <div class='cloInfobox cloInfoPort'>
                <div class='cloInfoTitle'><span class='cloInfoTitleTxt'>导出提示</span> <img class="iconClose" src=${require('./../images/icon_close_default.png')} alt="关闭" /></div>
                <div class='cloInfo closePort'>
                    <p class="selectDateTip">请选择一种导出的报表样式：</p>
                    <p class="selectDate"><input checked="true" type="radio" name="date" id="date1" data-select="1"><label for="date1">含缺陷明细项，最多只能导出7天</label></p>
                    <p class="selectDate"><input type="radio" name="date" id="date2" data-select="2"><label for="date2">不含缺陷明细项，最多只能导出90天</label></p>
                </div>
                <div class='btnBox'>
                    <span class='cancalColSet canclePort'>取消</span> 
                    <span class='saveColSet savePort'>确定</span>
                </div>
            </div>
        </div>`
        // var tip = `
        //     <div class="modaltip">${ops.message}</div>
        // `
        var tip = `
            ${ops.win===true?`
            <div class="modaltipSuc">
                <img src="${suc}" />
                ${ops.message}
            </div>`:ops.win=='default'?`
            <div class="modaltipSuc">
                <img src="${def}" />
                ${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:ops.type == 'radio'?radioExp: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,.alertModal .quite",function(){
            box.remove();
        })
    }
})(jQuery);