前端提示框插件sweetalert

sweetalert是一款前端提示框插件，使用也非常简单，而且还内置了许多参数，他可以替代alert()本站即采用的该款插件提示，今天把使用方法提供给大家！

1、引入JS和CSS文件

可以直接进入官网下载然后到头部进入或者直接从CDN引入,需要引用jq

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

2、开始使用

在需要使用弹窗提示的地方加入以下代码

swal("操作完成", "一个完美的提示框!", "success"）

也可以使用参数

swal({
    title:"成功",
    text:'文本',
    type:'success',
    // showCancelButton:false
    // showConfirmButton:false //确认按钮 ok
    html:true
})

其一： swal("恭喜","添加成功","success"); 第一个参数是title，第二个参数是text，第三个参数是提醒类型（success,error,warning,input），三个参数皆非必写项。最简便写法：swal("");就弹出一个框，上面有个确定按钮。不可写作：

swal();

该弹窗提供以下参数可供修改

参数	默认值	描述
title	null(required)	窗口的名称。可以通过对象的”title”属性或第一个参数进行传递。
text	null	窗口的描述。可以通过对象的”text”属性或第二个参数进行传递。
type/icon	null	窗口的类型。SweetAlert 有4种类型的图标动画：”warning”, “error”, “success” 和 “info”.可以将它放在”type”数组或通过第三个参数传递。
allowOutsideClick	false	如果设置为“true”，用户可以通过点击警告框以外的区域关闭警告框。
showConfirmButton	true	是否显示“确认/ok”按钮  可用参数  “false”   “true”
showCancelButton	false	是否显示“取消”按钮  可用参数  “false”   “true”
confirmButtonText	“OK”	该参数用来改变确认按钮上的文字。如果设置为”true”，那么确认按钮将自动将”Confirm”替换为”OK”。
confirmButtonColor	“#AEDEF4”	该参数用来改变确认按钮的背景颜色（必须是一个HEX值）。
cancelButtonText	“Cancel”	该参数用来改变取消按钮的文字。
closeOnConfirm	true	如果希望以后点击了确认按钮后模态窗口仍然保留就设置为”false”。该参数在其他SweetAlert触发确认按钮事件时十分有用。
imageUrl	null	添加自定义图片到警告框上。必须是图片的完整路径。
imageSize	“80×80”	当设定图片的路径后，你可以设定图片的大小，格式为两个数字中间带个”x”符号。
timer	null	警告框自动关闭的时间。单位是ms。

animation：提示框弹出时的动画效果，如slide-from-top（从顶部滑下）等。

 html：是否支持html，默认false,写成true以后，text里就可以写html元素。

下面给出一个demo：

在一些情景模式中，我们需要点击一个按钮，然后有确定和取消的选择，选择了确定就执行取消，选择了取消，就什么也不做。

首先在html中有：
<button class="btn btn-danger center" onClick="check(${article.id })">删除</button>
表面我想删除一条信息，然后利用sweetalert给我们弹出对话框并做出选择。其中js中代码如下

function check(id){
    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="${pageContext.request.contextPath}/admin?action=deleteArticleById&id="+id
            })
        }else{
            swal({
                title:"已取消",
                text:"您取消了删除操作！",
                type:"error"
            })
                }
                    }
        )
}

然后当我们点击一下删除按钮，就会利用sweetalert弹出确认删除的对话框，我们点击确定就删除，点击取消就取消了。sweetalert的对话框特别漂亮，
总的来说，它最基本的格式就是： swal({ 写弹的内容，样式，颜色}，{ 写后面执行的代码； }）我们所有需要执行的代码全部放到那个后面的那里。
上面的代码，点击删除后会出现下图：

可以发现成功的弹出来了对话框，此时注意下背后的id，显示共37条数据，然后我们测试点击取消。出现了下图

发现后面的没有变化。说明没有删除，然后再次点击删除并点击确定删除，如下图：

最后一个id已经变为36了，表面成功删除！上面的就是简单的利用
SweetAlert进行弹出对话框执行常规的删除确定取消等操作。

对于新手来说最重要的就是

 swal({ 写弹的内容，样式，颜色}，{ 写后面执行的代码； })
 

原文：https://blog.csdn.net/qq_25821067/article/details/53365900