17.前端框架之SweetAlert

最新推荐文章于 2024-06-10 18:42:17 发布
最新推荐文章于 2024-06-10 18:42:17 发布
阅读量2.1k 收藏 12
点赞数 2
分类专栏： 1.前端 文章标签： 前端框架 bootstrap html
风
本文链接：https://blog.csdn.net/qq_46137324/article/details/123530444
版权

1.简介

SweetAlert是一款很好用的弹出框框架
需要jQurey 与 bootstrap文件
https://github.com/lipis/bootstrap-sweetalert

2.准备环境

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SweetAlert</title>
    <!--0. 令牌-->
    {% load static %}
    <!--1. 导入jQuery 文件-->
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <!--2. 导入bootstrap css 文件-->
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <!--3. 导入bootstrap css 文件-->
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <!--5. 导入 sweetalert js文件-->
    <script src="{% static 'dist/sweetalert.js' %}"></script>
    <!--6. 导入 sweetalert css文件-->
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
</head>
<body>

<script>
    // 7. SweetAlert代码 ↓
</script>
</body>
</html>

3. 单条弹出框

swal("你有一封邮件,请查收！");

image-20220316144232738

4. 删除警告框 (没有取消提示)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file</title>
    <!--0. 令牌-->
    {% load static %}
    <!--1. 导入jQuery 文件-->
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <!--2. 导入bootstrap css 文件-->
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <!--3. 导入bootstrap css 文件-->
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <!--5. 导入 sweetalert js文件-->
    <script src="{% static 'dist/sweetalert.js' %}"></script>
    <!--6. 导入 sweetalert css文件-->
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
    <style>
        div.sweet-alert h2 {
            padding-top: 10px;
        }
    </style>
</head>
<body>

<script>
    
    swal({
            title: '你确定删除吗？',
            text: '删除之后清除所有数据!',
            // 警告类型 控制图标颜色
            type: 'warning',
            // 显示取消按钮
            showCancelButton: true,
            // 按钮文字
            confirmButtonText: '确定删除！',
            // 关闭按钮不显示
            closeOnConfirm: false
        },
        function () {  // success 控制图标动画
            swal("删除成功", "想要找回请在3小时内联系管理员!", "success");
        }
    );
    
    
</script>
</body>
</html>

3

success 属性设置的图标太大将标题给遮住了,为标题设置 padding-top.

/* 代代码中 */
div.sweet-alert h2 {
	padding-top: 10px;
}

image-20220316150926248

4

5 删除警告框（取消提示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sweetalert</title>
    <!--0. 令牌-->
    {% load static %}
    <!--1. 导入jQuery 文件-->
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <!--2. 导入bootstrap css 文件-->
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <!--3. 导入bootstrap css 文件-->
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <!--5. 导入 sweetalert js文件-->
    <script src="{% static 'dist/sweetalert.js' %}"></script>
    <!--6. 导入 sweetalert css文件-->
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
</head>
<body>

<script>
    swal({
            title: '你确定删除吗？',
            text: '删除之后清除所有数据!',
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: '确定删除！',
            cancelButtonText: '取消操作！',
        showLoaderOnConfirm:true,
        	// 需要点 ok 关闭弹框
            closeOnConfirm: false,
            closeOnCancel: false
        },
        function (isConfirm) {
            if (isConfirm) {
                swal("删除成功", "想要找回请在3小时内联系管理员!", "success");
            } else {
                swal('取消成功！', "已经撤销你的操作", 'error');
            }
        }
    )
</script>
</body>
</html>

6. 删除警告框(带延时动态)

在等待后端发送数据的时候,会一直有等待动画效果.
后端处理太快看不见效果可以添加一个延时.

// 后端延时
setTimeout(function () {
    swal();
}, 2000);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sweetalert</title>
    <!--0. 令牌-->
    {% load static %}
    <!--1. 导入jQuery 文件-->
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <!--2. 导入bootstrap css 文件-->
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <!--3. 导入bootstrap css 文件-->
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <!--5. 导入 sweetalert js文件-->
    <script src="{% static 'dist/sweetalert.js' %}"></script>
    <!--6. 导入 sweetalert css文件-->
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
    <style>
        div.sweet-alert h2 {
            padding-top: 10px;
        }
    </style>
</head>
<body>

<script>
    swal({
            title: '你确定删除吗？',
            text: '删除之后清除所有数据!',
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: '确定删除！',
            cancelButtonText: '取消操作！',
            showLoaderOnConfirm: true,
            // 需要点 ok 关闭弹框
            closeOnConfirm: false,
            closeOnCancel: false
        },


        function (isConfirm) {
            if (isConfirm) {
                // 延时
                setTimeout(function () {
                    swal("删除成功", "想要找回请在3小时内联系管理员!", "success");
                }, 2000);

            } else {
                swal('取消成功！', "已经撤销你的操作", 'error');
            }

        },
    )
</script>
</body>
</html>

123

7. 带图片的弹出框

image-20220316153017648

图片地址:
https://s2.loli.net/2022/03/16/5kA7B2qzhed4fH3.png 
图书是

    swal({
        title: '女王大人',
        text: '来电话了!',
        imageUrl: 'https://s2.loli.net/2022/03/16/5kA7B2qzhed4fH3.png '
    });

6

8. 可插入html代码的弹出框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sweetalert</title>
    <!--0. 令牌-->
    {% load static %}
    <!--1. 导入jQuery 文件-->
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <!--2. 导入bootstrap css 文件-->
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <!--3. 导入bootstrap css 文件-->
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <!--5. 导入 sweetalert js文件-->
    <script src="{% static 'dist/sweetalert.js' %}"></script>
    <!--6. 导入 sweetalert css文件-->
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
</head>
<body>

<script>
    swal({
        title: '<h1>一个神秘的链接</h1>',

        text: "<a href='https://s2.loli.net/2022/03/16/5kA7B2qzhed4fH3.png'>点我<a>",
        // 文本中可以使用html标签
        html: true
    })
</script>
</body>
</html>

GIF 2022-3-16 15-41-23

9. 自动关闭的弹出框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sweetalert</title>
    <!--0. 令牌-->
    {% load static %}
    <!--1. 导入jQuery 文件-->
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <!--2. 导入bootstrap css 文件-->
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <!--3. 导入bootstrap css 文件-->
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <!--5. 导入 sweetalert js文件-->
    <script src="{% static 'dist/sweetalert.js' %}"></script>
    <!--6. 导入 sweetalert css文件-->
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
</head>
<body>

<script>
    swal({
            title:'正在关机',
            text:'倒数2秒...',
            // 计时
            timer:2000,
            // 不需要 手动点击 ok
            showConfirmButton:false,
        });
</script>
</body>
</html>

GIF 2022-3-16 15-57-54

10. 弹出框输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sweetalert</title>
    <!--0. 令牌-->
    {% load static %}
    <!--1. 导入jQuery 文件-->
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <!--2. 导入bootstrap css 文件-->
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <!--3. 导入bootstrap css 文件-->
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <!--5. 导入 sweetalert js文件-->
    <script src="{% static 'dist/sweetalert.js' %}"></script>
    <!--6. 导入 sweetalert css文件-->
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
</head>
<body>

<script>
    swal({
            title: '修改密码',
            text: '你的名字:',
            type: 'input',
            // 展示取消按钮
            showCancelButton: true,
            // 关闭确认
            closeOnConfirm: false,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            // 动画
            animation: 'slide-from-top',
            inputPlaceholder: '输入答案'
        },
        function (inputValue) {  //  输入的数据被 inputValue 接收
            if (inputValue == false) {
                swal.showInputError('不能为空');

                return false;
            }

            swal('以提交', '您输入的内容是：' + inputValue, 'success');
        }
    );
</script>
</body>
</html>

GIF 2022-3-16 16-17-09

11.弹出框提交ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sweetalert</title>
    <!--0. 令牌-->
    {% load static %}
    <!--1. 导入jQuery 文件-->
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <!--2. 导入bootstrap css 文件-->
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <!--3. 导入bootstrap css 文件-->
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <!--5. 导入 sweetalert js文件-->
    <script src="{% static 'dist/sweetalert.js' %}"></script>
    <!--6. 导入 sweetalert css文件-->
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
    <style>
        div.sweet-alert h2 {
            padding-top: 10px;
        }
    </style>
</head>
<body>

<script>

swal({
        title:'提交数据',
        text:'ajax请求',
        type:'info',
        showCancelButton:true,
        closeOnConfirm:false,
        showLoaderOnConfirm:true
    },

    function(){
        $.ajax({
            url:'/aleat/',
            type:'post',
            data: {'msg': 'ajax请求'},
            success:function (args) {
                alert(args.msg)
            }
        })


        // 延时
        setTimeout(function(){
            swal("ajax请求完成");
        },2000);
       }
    );
</script>
</body>
</html>

    # urls.py aleat请求
	url('^aleat/', views.aleat),

# views.py 
def aleat(request):
    if request.is_ajax():
        print(request.POST)

        data = {'code': 200, 'msg': '我收到了ajax请求!'}

        from django.http import JsonResponse
        return JsonResponse(data)

    return HttpResponse('OK')

12

开局签到Python基础
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
sweetalert.css
05-19
sweetalert.css
sweetalert2.github.io:SweetAlert2的文档
04-05
如果你的项目使用了React、Vue或Angular等前端框架，SweetAlert2可以通过适配器或插件轻松集成。 10. **事件**： SweetAlert2还提供了多种事件，如`swal:closed`、`swal:dismiss`，让你可以监听对话框的状态变化...
SweetAlert使用
SampsonKong的博客
03-22 25
官方给出的SweetAlert介绍是：SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。我用过之后觉得确实好用，因此极力推荐此插件。我将它的用法总结如下： 弹出一个alert的写法： 其一： swa...
SweetAlert入门教程
热门推荐
前端大白兔的博客
06-04 2万+
SweetAlert入门教程前些天在做后台管理系统，在用户交互这块（弹窗、提示相关），用了一款还不错的插件SweetAlert(一款原生js提示框,允许自定义，支持设置提示框标题、提示类型、确认取消按钮文本、点击后回调函数等等), 效果挺好的，简单写一下用法。 把大象装冰箱，总共分三步: 第一步：下载（引用）有三种方式可供选择：1.通过bower安装：$ bower install sweeta
前端框架之SweetAlert
最新发布
落殇的博客
06-10 188
SweetAlert是一款很好用的弹出框框架。8、可以提交AJAX请求的弹出框。2、删除警告框（取消时不提示）5、可插入html代码的弹出框。3、删除警告框（取消时提示）6、自动关闭的弹出框。7、带输入框的弹出框。
SweetAlert2 （弹窗插件）
平平无奇小码农的博客
01-19 2082
1.直接运用sweetalert2 <style> .title-class { color: #fff; font-weight: 200; } </style> <script src="./js/sweetalert2.all.min.js"></script> <button class="btn2">点我看动画哦</button> <script> $btn2 = document
Vue 中如何使用 SweetAlert
学习笔记
03-24 1352
Vue 中如何使用 SweetAlert 官方说明：https://github.com/avil13/vue-sweetalert2#vue-2 一、在 package.json 添加 sweertalert2 "vue-sweetalert2": "^4.2.1" 二、然后在 main.js 中添加如下内容 // main.js import Vue from 'vue'; import VueSweetalert2 from 'vue-sweetalert2'; // If you don't n
js-jquery-SweetAlert【一】使用
dilv4062的博客
04-12 92
一、下载安装 地址：http://t4t5.github.io/sweetalert/ 二、页面引用 <script src="dist/sweetalert.min.js"></script> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css"> 当然还有...
前端项目-angular-sweetalert.zip
09-03
**前端项目-AngularJS与SweetAlert的整合** 在前端开发中，用户交互的提示信息是必不可少的一部分，而美观且功能强大的提示库可以提升用户体验。AngularJS 是一款强大的JavaScript框架，用于构建动态Web应用，而...
前端项目-bootstrap-sweetalert.zip
09-03
为了在你的项目中使用Bootstrap-Sweetalert，你需要将`dist`目录中的`sweetalert.css`和`sweetalert.js`（或者`sweetalert.min.css`和`sweetalert.min.js`）文件引入到你的HTML文件中，然后通过JavaScript调用其API...
sweetalert.zip
08-21
这个压缩包文件"sweetalert.zip"包含了库的核心组成部分，即`sweetalert.css`和`sweetalert.min.js`。 `sweetalert.css`是SweetAlert的样式表文件，它定义了对话框的外观和布局。在网页中引入此CSS文件后，你可以...
sweetalert
09-08
sweetalert弹框插架--自定义多按钮事件。
sweetalert（js,css，html）.zip
05-16
sweetalert弹窗插件JS、CSS文件以及示例HTML页面。资源出自：http://mishengqiang.com/sweetalert/
SweetAlert2的相关JS和CSS文件
09-02
可以使用的SweetAlert2的相关JS、CSS，并且包括兼容IE浏览器的JS文件
Sweet 简洁是美
JanLEE
08-13 475
核心价值 做 Sweetest 的过程中，我常常思考，它的核心价值是什么？ 是 Web 自动化测试吗？还是 Excel 编写用例？或者是 Web、http、App 融合测试？ 这些看起来都很重要，却不是核心价值。因为支持这些特性的框架也很多，能让 Sweetest 与其他框架区别开来的是什么？ 我想应该是：一套简洁强大的自动化用例编写及执行规范。而 Sweetest 只是这套规范的一个实现。 这套规范的独特之处在于： 关键字模块划分 关键字动态解析 元素变量定位法
完美的alert美化
windy1001的专栏
09-13 2万+
默认的alert总是在好看的样式下显得格格不入，所以在网上搜寻良久，终于找到了一个完美的美化方案。体验请点我 一、引入js和css文件 二、js调用替代alert 一、引入js和css文件 1、直接在head引入 &lt;link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetaler...
关于sweetalert2结合bootstrap使用时弹窗变小的解决办法
tzzqn2008的专栏
06-01 1710
最近把项目上使用的sweetalert升级到了sweetalert2的8.11.8版本，但升级完了以后发现所有弹窗全部变小了，如下图： 通过对css的检查，发现sweetalert的字体被覆盖了，font-size被改成了10px。 找到问题就好解决了，解决办法为，在自己的css文件中重写html的font-size，sweetalert2默认为16px，可根据自己项目的情况进行调整，个人建议设置为14px。 修改完毕后再次测试，熟悉的sweetalert2的窗口再次出现。 ...
探索优雅提示的艺术：SweetAlert 框架
gitblog_00095的博客
03-19 451
探索优雅提示的艺术：SweetAlert 框架 项目地址:https://gitcode.com/t4t5/sweetalert SweetAlert 是一个现代化的、高度可定制的弹出警告对话框库，它为你的Web应用提供了超越传统JavaScript alert的美观和功能体验。如果你厌倦了浏览器自带的生硬提示框，并寻求一种更友好的用户体验，SweetAlert 就是你要找的答案。 项目简介 Sw...
《Vue.js前端框架技术与实战》教学大纲与实训大纲.pdf
06-17
"Vue.js前端框架技术与实战教学大纲与实训大纲，主要涵盖Vue.js的核心概念、开发环境配置、基础语法、指令、组件、过渡与动画、Vuex状态管理以及VueRouter路由设置，旨在培养Web前端工程师的技能，适应现代Web开发...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值