弹出层模板

提示窗口

html

<div id="kd-msg" class="easyui-dialog" modal='true' closed='true' title="<span class='iconfont'>&#xe772;</span>提示"
     style=" 360px; height: 170px; padding: 10px">
  <div id="kd-innerDiv" style="line-height:50px;text-align:center;">
   
      <span class='msg' style="vertical-align: middle;height: 30px;">请至少选中一条数据！</span>
  </div>
  <div style=" 100%; height: 32px; text-align: center; margin-top: 15px;">
    <div class="submitbtn" onclick="$('#kd-msg').dialog('close')">确定</div>
  </div>
</div>

css. 配合iconfont使用

.kd-loading
    {
    width: 50px;
    height: 50px;
    display: inline-block;
    -webkit-animation:loading-animation 1s infinite; /*Safari and Chrome*/
    }
    
    @keyframes loading-animation
    {
    from {-webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);}
    to {-webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);}
    }
    
    @-webkit-keyframes loading-animation /*Safari and Chrome*/
    {
    from {-webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);}
    to {-webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);}
    }

js.

function kdShowMsg(msg,type){
var msgObj={};
if(!msg){
console.log('参数错误');
return;
}else{
if(!type){
msgObj.type=1;
}else{
msgObj.type=type;
}
};
msgObj.msg=msg;
//type: 1默认提示图标绿色 2成功:绿色 3失败:红色
$('#kd-innerDiv').html('<span class="msg" style="font-size:16px;" title="'+msgObj.msg+'" style="vertical-align: middle;height: 30px;">'+msgObj.msg+'</span>');
var icoSpan='';

if(msgObj.type===1){//默认
icoSpan='<span class="iconfont" style="vertical-align: middle;color:#1bab8e;font-size:40px">&#xe772;</span>';
}else if(msgObj.type===2){//成功
icoSpan='<span class="iconfont" style="vertical-align: middle;color:#1bab8e;font-size:40px">&#xe63a;</span>';
}else if(msgObj.type===3){//错误
icoSpan='<span class="iconfont" style="vertical-align: middle;color:#f87878;font-size:40px">&#xe62c;</span>';
}else if(msgObj.type===4){//加载中
icoSpan='<span class="iconfont kd-loading" style="vertical-align: middle;color:#1bab8e;font-size:40px">&#xe6ab;</span>';
}


$('#kd-innerDiv').prepend(icoSpan)
// 重置msg位置
var msglogLeft = (document.body.clientWidth / 2) - 180
var msglogTop = (document.body.clientHeight / 2) - 85
$('#kd-msg').dialog({
left: msglogLeft,
top: msglogTop
})
$('#kd-msg').dialog('open');
}

调用:kdShowMsg('当前任务已执行完毕!',2)

效果: