sweetalert提示框

文档

sweetalert Api：http://t4t5.github.io/sweetalert/

开源项目源码：https://github.com/t4t5/sweetalert

在文件中首先引入css和js 文件

<link href="/static/js/sweetalert/sweet-alert.css" rel="stylesheet"/>

<!-- jQuery 3 -->
<script src="/static/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/static/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!--操作提示框-->
<script src="/static/js/sweetalert/sweet-alert.min.js"></script>

js代码：

     swal({
                    title: "操作提示",      //弹出框的title
                    text: "确定删除吗？",   //弹出框里面的提示文本
                    type: "warning",        //弹出框类型
                    showCancelButton: true, //是否显示取消按钮
                    confirmButtonColor: "#DD6B55",//确定按钮颜色
                    cancelButtonText: "取消",//取消按钮文本
                    confirmButtonText: "确定",//确定按钮上面的文档
                    closeOnConfirm: true
                }, function () {
　　　　　　　　　　// 点击确定后执行以下代码
　　　　　　　　　　..............

});

效果图

参数说明：

showCancelButton：是否显示取消按钮；

animation：提示框弹出时的动画效果，可选（pop、none、slide-from-top、slide-from-bottom）；

timer：设置自动关闭提示框时间（毫秒）；

showConfirmButton：是否显示确定按钮；

confirmButtonText：定义确定按钮文本；

cancelButtonText：定义取消按钮文本；

imageUrl：定义弹出框的图片地址；

推荐学习网址：https://sweetalert.js.org/docs/

猜你喜欢