首页 > 其他分享 >SweetAlert

SweetAlert

时间：2023-02-19 16:11:57浏览次数：61  
标签：function 效果 title swal 按钮 SweetAlert click

一：简介

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>





标签：function,效果,title,swal,按钮,SweetAlert,click	

From： https://www.cnblogs.com/frantichow/p/17134905.html
      

      




      

      

        
相关文章

        

          
        

      

    

    

      
赞助商

      




      

      
阅读排行

      

        
      

    

  





  
 
    
网站主页关于我们联系我们网站地图 

    
本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。 

    
Copyright © 2020-2023  IPS99  版权所有 IPS99