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 warn = require("../images/warn.png")
    let warns = require("../images/warns.png")
    let loadingImg = require("../images/loading.gif")
    $.alerModal = function (options) {
        var dft = {
            sureBtn: true,
            quiteBtn: false,
            gobackBtn: false,
            width: "400",
            title: "标题",
            sureText: "确定",
            cancalText: '取消',
            gobackText: '我知道了',
            message: '<p class="tip">内容</p>',
            time: 1500,
		    isFather: true,
		    fatherWrapper: $("#mainBox", parent.document),
            type: 'modal', //tip,loading
            callback: null
        };
        var ops = $.extend(dft, options || {});
        var popDom = $('.alertModal:visible');
        if(ops.isFather){
		  popDom =ops.fatherWrapper.find('.alertModal:visible');
		}
		const ptitle = popDom.find(".titlemodal").text().trim();
		if(popDom.length&&ptitle!=="修改密码"){
		  //如果该弹窗已存在，则不再显示多个
		  return;
		}
		if(ptitle==="修改密码"){
		  popDom.remove();
		}
        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="titlemodal">${ops.title} <img src="${close}" alt=""></p>
                <div class="content ${ops.gobackBtn?'contentleft':''}">

                <img style='display:${ops.gobackBtn?'inlineBlock':'none'} ' class='warnimg' src="${warn}" />
                    ${ops.message}
                </div>
                <div class="btns clearfix">
                    <span class="quite" style="display:${ops.quiteBtn?'inlineBlock':'none'}">${ops.cancalText}</span>
                    <span class="sure sureChange" style="display:${ops.sureBtn?'inlineBlock':'none'}">${ops.sureText}</span>
                    <span class="gobackbtn" style="display:${ops.gobackBtn?'inlineBlock':'none'}">${ops.gobackText}</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>`:ops.win=='warn'?`
            <div class="modaltipSuc">
                <img src="${warns}" />
                ${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 () {
                $(".divModal").remove();
            }, ops.time);
        }
        if (ops.callback && typeof ops.callback === 'function') {
            $(parent.document||document).on('click', ".alertModal .titlemodal img,.alertModal .quite,.alertModal .gobackbtn", function () {
                ops.callback();
            })
        } else {
            $(parent.document||document).on('click', ".alertModal .titlemodal img,.alertModal .quite,.alertModal .gobackbtn", function () {
                box.remove();
            })
        }
    }
})(jQuery);