jquery 自带的提示样式


 
 <script type="text/javascript">
//====================================以下为测试函数=======================================//
function test1(){
 scscms_alert("默认提示信息");
}
function test2(){
 scscms_alert("成功提示信息","ok");
}
function test3(){
 scscms_alert("成功提示后回调函数","ok",function(){alert("回调成功!")});
}
function test4(){
 scscms_alert("失败提示信息","error");
}
function test5(){
 scscms_alert("失败提示信息","error",function(){alert("哦!no!")});
}
function test6(){
 scscms_alert("警告提示信息","warn");
}
function test7(){
 scscms_alert("警告提示信息","warn",function(){alert("哦!警告!")});
}
function test8(){
 scscms_alert("您喜欢此信息提示吗?","confirm",function(){
  scscms_alert("您选择了喜欢,谢谢!","ok");
 },function(){
  scscms_alert("您选择了不喜欢,汗!","error");
 });
}
function test9(){
 scscms_alert("本信息3秒后自动关闭","ok","",3);
}
function test10(){
 scscms_alert("询问信息定时关闭提示信息,3秒后自动关闭,无取消时回调函数.不推荐使用。","confirm",function(){alert("确定回调用!")},3);
}
</script>
<div class="test">

 <button type="button" οnclick="test1()">默认提示信息</button>
 <br/>
 <button type="button" οnclick="test2()">成功提示信息</button>
 <br/>
 <button type="button" οnclick="test3()">成功提示后回调函数</button>
 <br/>
 <button type="button" οnclick="test4()">失败提示信息</button>
 <br/>
 <button type="button" οnclick="test5()">失败提示后回调函数</button>
 <br/>
 <button type="button" οnclick="test6()">警告提示信息</button>
 <br/>
 <button type="button" οnclick="test7()">警告提示后回调函数</button>
 <br/>
 <button type="button" οnclick="test8()">询问信息</button>
 <br/>
 <button type="button" οnclick="test9()">定时关闭提示信息</button>
 <br/>
 <button type="button" οnclick="test10()">询问信息定时关闭提示信息</button>
 
</div>
 

 

 

 

function scscms_alert(msg,sign,ok,can){
 var c_=false;//是否已经关闭窗口,解决自动关闭与手动关闭冲突
 sign=sign||"";
 var s="<div id='mask_layer'></div><div id='scs_alert'><div id='alert_top'></div><div id='alert_bg'><table width='260' align='center' border='0' cellspacing='0' cellpadding='1'><tr>";
 if (sign!="")s+="<td width='45'><div id='inco_"+sign+"'></div></td>";
 s+="<td id='alert_txt'>"+msg+"</td></tr></table>";
 if (sign=="confirm"){
  s+="<a href='javascript:void(0)' id='confirm_ok'>确 定</a><a href='javascript:void(0)' id='confirm_cancel'>取 消</a>";
 }else{
  s+="<a href='javascript:void(0)' id='alert_ok'>确 定</a>"
 }
 s+="</div><div id='alert_foot'></div></div>";
 $("body").append(s);
 $("#scs_alert").css("margin-top",-($("#scs_alert").height()/2)+"px"); //使其垂直居中
 $("#scs_alert").focus(); //获取焦点,以防回车后无法触发函数

 if (typeof can == "number"){
 //定时关闭提示
  setTimeout(function(){
   close_info();
  },can*1000);
 }
 function close_info(){
 //关闭提示窗口
  if(!c_){
  $("#mask_layer").fadeOut("fast",function(){
   $("#scs_alert").remove();
   $(this).remove();
  });
  c_=true;
  }
 }
 $("#alert_ok").click(function(){
  close_info();
  if(typeof(ok)=="function")ok();
 });
 $("#confirm_ok").click(function(){
  close_info();
  if(typeof(ok)=="function")ok();
 });
 $("#confirm_cancel").click(function(){
  close_info();
  if(typeof(can)=="function")can();
 });

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值