弹框插件sweetalert

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