SweetAlert是一个JS插件,能够完美替代JS自带的alert弹出框,并且功能强大,设计优美。
- 引入文件
<link href="${ctx }/libs/sweetalert/sweetalert.css" rel="stylesheet" type="text/css">
<script src="${ctx }/libs/sweetalert/sweetalert.min.js" type="text/javascript"></script>
- JS代码
buttons: {
"提交": function() {
//使用sweetAlert插件
swal({
title:"您确定要提交吗",
text:"提交后将无法恢复,请谨慎操作!",
type:"warning",
showCancelButton:true,
confirmButtonText:"提交",
cancelButtonText:"取消",
closeOnConfirm:false,
closeOnCancel:false
},
function(isConfirm){
if(isConfirm){
swal({
title:"提交成功!",
text:"您已经成功提交。",
type:"success"
},
function(){
//两种提交方式都可以
//document.forms[0].submit();
document.getElementById('inputForm').submit();
$("#dialog-form").dialog( "close" );
});
}else{
swal({
title:"已取消",
text:"您取消了本次操作!",
type:"error"
},
function(){
$("#dialog-form").dialog( "close" );
});
}
});
//不能写在这里,可能表单还没提交操作,就已经关闭了
//$("#dialog-form").dialog( "close" );
},
"取消": function() {
$(this).dialog("close");
}
效果如下
提交操作
取消操作
参考地址
http://blog.csdn.net/Ayhan_huang/article/details/77365576
http://www.cnblogs.com/beiz/p/5238124.html