SweetAlert的使用

一：简介

1.什么是`SweetAlert`?

SweetAlert是可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。

简而言之，SweetAlert就是1款基于JS封装的可以自定义美化的提示框。

2.官方文档

https://www.sweetalert.cn/docs.html

3.下载地址

https://github.com/t4t5/sweetalert/archive/master.zip

二：使用

1.使用文档

参数	默认值	描述
title	null （必填）	弹窗的`名称` 可以通过对象的`title`属性或`第1个`参数进行传递。
text	null	弹窗的`描述` 可以通过对象的`text`属性或`第2个`参数进行传递。
type	null	有4种类型的图标动画："warning", "error", "success" 和 "info" 可以将它放在`type`数组或通过`第3个`参数传递。
allowOutsideClick	false	如果设置为“true”，用户可以通过`点击警告框以外的区域关闭警告框`
showCancelButton	false	如果设置为“true”，“cancel”按钮将显示，`点击可以关闭警告框`
confirmButtonText	"OK"	该参数用来改变`确认按钮上的文字` 如果设置为"true"，那么确认按钮将自动将"Confirm"替换为"OK"
confirmButtonClass	null	设置`确认按钮的class`（可以是自定义的class）
confirmButtonColor	"#AEDEF4"	该参数用来改变确认`按钮的背景颜色`（必须是一个HEX值）。
cancelButtonText	"Cancel"	该参数用来改变`取消按钮的文字`
cancelButtonClass	null	设置`取消按钮的class`（可以是自定义的class）
closeOnConfirm	true	点击确认按钮后模态窗口`仍然保留`就设置为"false" 该参数在其他SweetAlert触发确认按钮事件时十分有用
imageUrl	null	添加`自定义图片`到警告框上必须是图片的完整路径（本地路径/网络路径）
imageSize	"300x120"	设定图片的路径后，可以`设定图片的大小` 格式为两个数字中间带个`x`符号。
timer	null	警告框`自动关闭的时间`，单位是ms
html	flase	设置为`true`后，在`text`中可以`插入HTML代码`

三：效果展示

1.title+text

2.4种type

3.4种弹窗效果

4.取消按钮+文字+样式

5.关闭弹窗

6.显示图片+设置弹窗自动关闭时间

7.插入HTML+确认删除

HTML源码

这里使用了Bootstrap4+JQuery3.5.1+SweetAlert

只需要将下面代码复制到一个html文件即可。

CSS、JS都使用了CDN（内容分发网络，但是需要联网）的方式导入，无需单独导入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SweetAlert</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="text-center col-md-2 offset-md-1" style="margin-top: 120px">
            <button id="btn1-1" class="btn btn-primary btn-lg d-block m-3">效果1-1</button>
            <button id="btn1-2" class="btn btn-primary btn-lg d-block m-3">效果1-2</button>
        </div>

        <div class="text-center col-md-2" style="margin-top: 120px; margin-left: -150px">
            <button id="btn2-1" class="btn btn-info btn-lg d-block m-3">效果2-1</button>
            <button id="btn2-2" class="btn btn-success btn-lg d-block m-3">效果2-2</button>
            <button id="btn2-3" class="btn btn-warning btn-lg d-block m-3">效果2-3</button>
            <button id="btn2-4" class="btn btn-danger btn-lg d-block m-3">效果2-4</button>
        </div>

        <div class="text-center col-md-2" style="margin-top: 120px; margin-left: -150px">
            <button id="btn3-1" class="btn btn-danger btn-lg d-block m-3">效果3-1</button>
            <button id="btn3-2" class="btn btn-warning btn-lg d-block m-3">效果3-2</button>
            <button id="btn3-3" class="btn btn-success btn-lg d-block m-3">效果3-3</button>
            <button id="btn3-4" class="btn btn-info btn-lg d-block m-3">效果3-4</button>
        </div>

        <div class="text-center col-md-2" style="margin-top: 120px; margin-left: -150px">
            <button id="btn4-1" class="btn btn-secondary btn-lg d-block m-3">效果4-1</button>
            <button id="btn4-2" class="btn btn-secondary btn-lg d-block m-3">效果4-2</button>
            <button id="btn4-3" class="btn btn-primary btn-lg d-block m-3">效果4-3</button>
            <button id="btn4-4" class="btn btn-primary btn-lg d-block m-3">效果4-4</button>
        </div>


        <div class="text-center col-md-2" style="margin-top: 120px; margin-left: -150px">
            <button id="btn5-1" class="btn btn-success btn-lg d-block m-3">效果5-1</button>
            <button id="btn5-2" class="btn btn-success btn-lg d-block m-3">效果5-2</button>
            <button id="btn5-3" class="btn btn-info btn-lg d-block m-3">效果5-3</button>
            <button id="btn5-4" class="btn btn-info btn-lg d-block m-3">效果5-4</button>
        </div>


        <div class="text-center col-md-2" style="margin-top: 120px; margin-left: -150px">
            <button id="btn6-1" class="btn btn-danger btn-lg d-block m-3">效果6-1</button>
            <button id="btn6-2" class="btn btn-danger btn-lg d-block m-3">效果6-2</button>
            <button id="btn6-3" class="btn btn-warning btn-lg d-block m-3">效果6-3</button>
            <button id="btn6-4" class="btn btn-warning btn-lg d-block m-3">效果6-4</button>
        </div>


        <div class="text-center col-md-2" style="margin-top: 120px; margin-left: -150px">
            <button id="btn7-1" class="btn btn-danger btn-lg d-block m-3">效果7-1</button>
            <button id="btn7-2" class="btn btn-danger btn-lg d-block m-3">效果7-2</button>
        </div>
    </div>
</div>

<script>
    $('#btn1-1').click(function () {
        swal('我是 Title')
    })
    $('#btn1-2').click(function () {
        swal({
            title: '我是 Title',
            text: '我是 Text'
        })
    })


    $('#btn2-1').click(function () {
        swal({
            title: '我是类型 Info',
            type: 'info',
        })
    })
    $('#btn2-2').click(function () {
        swal({
            title: '我是类型 Success',
            type: 'success',
        })
    })
    $('#btn2-3').click(function () {
        swal({
            title: '我是类型 Warning',
            type: 'warning',
        })
    })
    $('#btn2-4').click(function () {
        swal({
            title: '我是类型 Error',
            type: 'error',
        })
    })


    $('#btn3-1').click(function () {
        swal({
            title: '弹窗效果：砰',
            animation: 'pop',

        })
    })
    $('#btn3-2').click(function () {
        swal({
            title: '弹窗效果：无',
            animation: 'none',
        })
    })
    $('#btn3-3').click(function () {
        swal({
            title: '弹窗效果：顶部下滑',
            animation: 'slide-from-top',
        })
    })
    $('#btn3-4').click(function () {
        swal({
            title: '弹窗效果：底部上滑',
            animation: 'slide-from-bottom',
        })
    })


    $('#btn4-1').click(function () {
        swal({
            title: '不显示取消按钮',
        })
    })
    $('#btn4-2').click(function () {
        swal({
            title: '显示取消按钮',
            showCancelButton: 'true',
        })
    })
    $('#btn4-3').click(function () {
        swal({
            title: '设置确认、取消按钮文字',
            showCancelButton: 'true',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        })
    })
    $('#btn4-4').click(function () {
        swal({
            title: '设置确认、取消按钮的class',
            showCancelButton: 'true',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-outline-warning',
        })
    })


    $('#btn5-1').click(function () {
        swal({
            title: '普通效果',
        })
    })
    $('#btn5-2').click(function () {
        swal({
            title: '点击其他地方 关闭弹窗',
            allowOutsideClick: 'true',
        })
    })
    $('#btn5-3').click(function () {
        swal({
            title: '点击确认按钮 关闭弹窗',
            closeOnConfirm: 'true',
        })
    })
    $('#btn5-4').click(function () {
        swal({
            title: '点击确认按钮 不关闭弹窗',
            closeOnConfirm: 'false',
            allowOutsideClick: 'true',
        })
    })


    $('#btn6-1').click(function () {
        swal({
            title: '显示图片',
            imageUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
        })
    })
    $('#btn6-2').click(function () {
        swal({
            title: '显示图片+设置大小',
            imageUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
            imageSize: '300x110',
        })
    })
    $('#btn6-3').click(function () {
        swal({
            title: '弹框0.5秒后自动关闭',
            timer: 500,
        })
    })
    $('#btn6-4').click(function () {
        swal({
            title: '弹框2秒后自动关闭',
            timer: 2000,
        })
    })


    $('#btn7-1').click(function () {
        swal({
            title: '插入HTML',
            text: '' +
                '<h1>我是1级标题</h1>' +
                '<h2>我是2级标题</h2>' +
                '<h3>我是3级标题</h3>' +
                '<h4>我是4级标题</h4>' +
                '<h5>我是5级标题</h5>' +
                '<h6>我是6级标题</h6>'
            ,
            html: 'true',
        })
    })
    $('#btn7-2').click(function () {
        swal({
            title: '确认删除？',
            text: '删除后将无法恢复',
            showCancelButton: 'true',
            confirmButtonText: '确认',
            cancelButtonText: '取消',
        }, function (isConfirm) {
            if (isConfirm) {
                setTimeout(function () {
                    swal({
                        title: '删除成功',
                        type: 'success',
                        timer: 1000,
                    })
                }, 200)

            }
        })
    })

</script>

</body>
</html>

posted @ 2020-11-14 22:28 轻描丨淡写阅读(3914) 评论(0) 编辑收藏举报

刷新页面返回顶部

轻描丨淡写

一个技术小白

SweetAlert的使用

一：简介

1.什么是`SweetAlert`?

2.官方文档

3.下载地址

二：使用

1.使用文档

三：效果展示

1.title+text

2.4种type

3.4种弹窗效果

4.取消按钮+文字+样式

5.关闭弹窗

6.显示图片+设置弹窗自动关闭时间

7.插入HTML+确认删除

HTML源码

公告

轻描丨淡写

一个技术小白

SweetAlert的使用

一：简介

1.什么是SweetAlert?

2.官方文档

3.下载地址

二：使用

1.使用文档

三：效果展示

1.title+text

2.4种type

3.4种弹窗效果

4.取消按钮+文字+样式

5.关闭弹窗

6.显示图片+设置弹窗自动关闭时间

7.插入HTML+确认删除

HTML源码

公告

1.什么是`SweetAlert`?