提示窗口

html

1 
     
       3   
      
        4     5       
       请至少选中一条数据！ 6   
      
 7   
      
        8     
       
        确定
       
 9   
      
10 
     

css. 配合iconfont使用

1 .kd-loading 2     { 3     width: 50px; 4     height: 50px; 5     display: inline-block; 6     -webkit-animation:loading-animation 1s infinite; /*Safari and Chrome*/ 7     } 8      9     @keyframes loading-animation10     {11     from {-webkit-transform: rotate(0deg);12         -o-transform: rotate(0deg);}13     to {
   -webkit-transform: rotate(-360deg);14         -o-transform: rotate(-360deg);}15     }16     17     @-webkit-keyframes loading-animation /*Safari and Chrome*/18     {19     from {-webkit-transform: rotate(0deg);20         -o-transform: rotate(0deg);}21     to {
   -webkit-transform: rotate(-360deg);22         -o-transform: rotate(-360deg);}23     }

 

js.

1 function kdShowMsg(msg,type){ 2 var msgObj={}; 3 if(!msg){ 4 console.log('参数错误'); 5 return; 6 }else{ 7 if(!type){ 8 msgObj.type=1; 9 }else{10 msgObj.type=type;11 }12 };13 msgObj.msg=msg;14 //type: 1默认提示图标绿色 2成功:绿色 3失败:红色15 $('#kd-innerDiv').html(''+msgObj.msg+'');16 var icoSpan='';17 18 if(msgObj.type===1){
   //默认19 icoSpan='';20 }else if(msgObj.type===2){
   //成功21 icoSpan='';22 }else if(msgObj.type===3){
   //错误23 icoSpan='';24 }else if(msgObj.type===4){
   //加载中25 icoSpan='';26 }27 28 29 $('#kd-innerDiv').prepend(icoSpan)30 // 重置msg位置31 var msglogLeft = (document.body.clientWidth / 2) - 18032 var msglogTop = (document.body.clientHeight / 2) - 8533 $('#kd-msg').dialog({34 left: msglogLeft,35 top: msglogTop36 })37 $('#kd-msg').dialog('open');38 }

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

效果: