1.SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。
swal({title: "温馨提示", text: "提交成功!", type: "success",confirmButtonText:"ok"},
function (data) {
window.history.back();
}
);
title:SweetAlert弹框的标题,text:SweetAlert中提示显示的内容文本,SweetAlert会根据type中的值显示不同的图标warning、error、success、info,confirmButtonText:按钮文本,function可以在里边编写,按下按钮的后执行的代码.如果不在function中执行刷新或者跳转,可能会出现用户未点击按钮,弹框闪过直接执行操作,但是如果在function中编写之后的操作方法即可避免这个问题. 补充(function的data 是监听用户是否点击如果点击返回true)
swal({
title:"您确定要删除这条信息吗",
text:"删除后将无法恢复,请谨慎操作!",
type:"warning",
showCancelButton:true,
confirmButtonColor:"#DD6B55",
confirmButtonText:"是的,我要删除!",
cancelButtonText:"让我再考虑一下…",
closeOnConfirm:false,
closeOnCancel:false
},function(isConfirm){
if(isConfirm) {
swal({
title:"删除成功!",
text:"您已经永久删除了这条信息。",
type:"success"
},function({
window.location="***"
})
} else{
swal({title:"已取消",
text:"您取消了删除操作!",
type:"error"})
}
}
)
上边代码是一个SweetAlert的类似与javaScript的confirm的确认框 confirmButtonText 确认按钮文本,cancelButtonText关闭按钮文本 confirmButtonColor按钮颜色 是否关闭确认按钮closeOnConfirm ,closeOnCancel是否关闭取消按钮isConfirm返回的是用户操作 点击确认是true反之false
swal({
title: "<small>请输入相关信息</small>!",
text: "单位名称 <input type='text' name='myinput' id='jfdw'>"
+"文件 <input type='text' name='myinput' id='jfwj'>"
+"文号 <input type='text' name='myinput' id='jfwh'>"
+"原因 <input type='text' name='myinput' id='jfyy'>",
html: true,
type: "prompt",
}, function(){
alert(document.getElementById('jfwj').value);
})
SweetAlert对话输入框如果要在text加入标签要设置html:true 否则 text中的标签不会生效
sweetalert免费下载地址:sweetalert.css sweetalert.js