漂亮的弹窗插件 —— SweetAlert教程

SweetAlert可以替代JavaScript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。
官方网站: https://sweetalert.js.org/
Github: https://github.com/t4t5/sweetalert
中文教程站: http://mishengqiang.com/sweetalert/

使用方法

1.引入(我用的CDN引入)

1
2
<link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>

2.使用简称函数swal调用sweetAlert

1
2
3
4
5
6
7
8
9
10
11
12
swal({
title: "确定删除吗?",
text: "你将无法恢复该虚拟文件!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "确定删除!",
closeOnConfirm: false
},
function(){
swal("删除!", "你的虚拟文件已经被删除。", "success");
});

3.举个栗子

  • html代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    1.基本信息:<button id="demo1">试一试</button> <br />
    2.带有文字的标题:<button id="demo2">试一试</button> <br />
    3.成功提示:<button id="demo3">试一试</button> <br />
    4.带有“确认”按钮的功能的警告消息:<button id="demo4">试一试</button> <br />
    5.通过传递参数,您可以执行一些其他的事情比如“取消”。:<button id="demo5">试一试</button> <br />
    6.一个有自定义图标的消息:<button id="demo6">试一试</button> <br />
    7.自定义HTML信息:<button id="demo7">试一试</button> <br />
    2秒后关闭:<button id="demo8">试一试</button> <br />
    8.更换“提示”功能: <button id="demo9">试一试</button> <br />
    9.使用加载程序(例如,用于AJAX请求): <button id="demo10">试一试</button> <br />
  • js代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    document.getElementById("demo1").onclick = function() {
    swal("这是一个信息提示框!")
    };
    document.getElementById("demo2").onclick = function() {
    swal("这是一个信息提示框!", "很漂亮,不是吗?")
    };
    document.getElementById("demo3").onclick = function() {
    swal("干得好", "你点击了按钮!", "success")
    };
    document.getElementById("demo4").onclick = function() {
    swal({
    title: "你确定?",
    text: "您将无法恢复这个虚构的文件!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "是的,删除!",
    closeOnConfirm: false
    }, function() {
    swal("删除!", "您的虚构文件已被删除!", "success")
    })
    };
    document.getElementById("demo5").onclick = function() {
    swal({
    title: "你确定?",
    text: "您将无法恢复这个虚构的文件!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "是的,删除!",
    cancelButtonText: "不,取消",
    closeOnConfirm: false,
    closeOnCancel: false
    }, function(isConfirm) {
    if (isConfirm) {
    swal("删除!", "您的虚构文件已被删除!", "success")
    } else{
    swal("取消!", "您的虚构文件是安全的!", "error")
    }
    })
    };
    document.getElementById("demo6").onclick = function() {
    swal({
    title: "Sweet!",
    text: "这里是自定义图像!",
    imageUrl: "img/thumbs-up.jpg"
    })
    };
    document.getElementById("demo7").onclick = function() {
    swal({
    title: "HTML <small>标题</small>!",
    text: "A custom <span style='color:pink'>html<span> message.",
    html: true
    })
    };
    document.getElementById("demo8").onclick = function() {
    swal({
    title: "自动关闭警报!",
    text: "2秒后自动关闭",
    timer: 2000,
    showConfirmButton: false
    })
    };
    document.getElementById("demo9").onclick = function() {
    swal({
    title: "请输入!",
    text: "填写一些信息",
    type: "input",
    showCancelButton: true,
    closeOnConfirm: false,
    animation: "slide-from-top",
    inputPlaceholder: "请输入..."
    }, function(inputValue) {
    if (inputValue === false) {
    return false;
    }
    if (inputValue === "") {
    swal.showInputError("内容不能为空!");
    return false;
    }
    swal("Nice!", "你输入的是:" + inputValue, "success")
    })
    };
    document.getElementById("demo10").onclick = function() {
    swal({
    title: "AJAX请求实例",
    text: "提交运行Ajax请求",
    type: "info",
    showCancelButton: true,
    closeOnConfirm: false,
    showLoaderOnConfirm: true
    }, function() {
    setTimeout(function() {
    swal("AJAX请求完成!");
    }, 2000)
    })
    };
  • 效果预览

更多详情

可以去中文教程站查看更多详情,里面包括了各种配置和方法,以及示例
中文教程站: http://mishengqiang.com/sweetalert/

sweetalert2

https://github.com/sweetalert2/sweetalert2

直接引入https://cdn.bootcss.com/limonte-sweetalert2/7.20.5/sweetalert2.all.min.js,不需要分别引入css和js了

例子

1
2
3
4
5
6
7
8
swal({
title:'下面是您的预览链接',
input: 'textarea',
inputValue:'123',
confirmButtonText:`<a style="color:white;" href="//www.baidu.com">预览</a>`,
showCancelButton: true,
cancelButtonText:'确定',
})

【点击查看例子】

上面的例子也可以用then

1
2
3
4
5
6
7
swal({
..........
}).then((result)=>{
if(result.value){
open('//www.baidu.com');
}
});

-------------本文结束感谢您的阅读-------------