sweetalert是一个漂亮的弹窗

中文网址：

http://mishengqiang.com/sweetalert/

它需要2个文件：sweetalert-dev.js和sweetalert.css

下载插件

怎么下载呢？直接从上面的网站扣下来，就可以了

修改index.html，引入2个资源

<script src="http://mishengqiang.com/sweetalert/js/sweetalert-dev.js"></script>

<link rel="stylesheet" href="http://mishengqiang.com/sweetalert/css/sweetalert.css">

首页有一个删除还不错，直接贴过来即可！

index.html完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://mishengqiang.com/sweetalert/js/sweetalert-dev.js"></script>

    <link rel="stylesheet" href="http://mishengqiang.com/sweetalert/css/sweetalert.css">

</head>

<body>

<button class="btn2">click</button>

<script>

    $(".btn2").click(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");

                }

            });

    });

</script>

</body>

</html>

index.html

访问首页，点击click，效果如下：

表格删除一条记录

修改settings.py，开启csrf

MIDDLEWARE = [

    'django.middleware.security.SecurityMiddleware',

    'django.contrib.sessions.middleware.SessionMiddleware',

    'django.middleware.common.CommonMiddleware',

    'django.middleware.csrf.CsrfViewMiddleware',

    'django.contrib.auth.middleware.AuthenticationMiddleware',

    'django.contrib.messages.middleware.MessageMiddleware',

    'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

修改views.py，修改ajax_handle视图函数，返回一个json

def ajax_handle(request):

    if request.method == "POST":

        print(request.POST)

        #定义一个状态，假装删除成功了

        response = {"state": True}

        return HttpResponse(json.dumps(response))  # 返回json

    else:

        return HttpResponse("非法请求,必须是POST")

修改index.html，写一个table，模拟删除操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://mishengqiang.com/sweetalert/js/sweetalert-dev.js"></script>

    <link rel="stylesheet" href="http://mishengqiang.com/sweetalert/css/sweetalert.css">

</head>

<body>

{% csrf_token %}

<div class="container">

    <div class="row">

        <div class="col-md-8 col-md-offset-2">

            <h3>数据展示</h3>

            <table class="table table-hover table-bordered">

                <thead>

                <tr>

                    <th>#</th>

                    <th>First Name</th>

                    <th>Last Name</th>

                    <th>Username</th>

                    <th>operation</th>

                </tr>

                </thead>

                <tbody>

                <tr>

                    <th scope="row">1</th>

                    <td>Mark</td>

                    <td>Otto</td>

                    <td>@mdo</td>

                    <td><input type="button" class="btn btn-danger" data-toggle="modal" line_num="1" value="delete"/>

                    </td>

                </tr>

                <tr>

                    <th scope="row">2</th>

                    <td>Jacob</td>

                    <td>Thornton</td>

                    <td>@fat</td>

                    <td><input type="button" class="btn btn-danger" data-toggle="modal" line_num="2" value="delete"/>

                    </td>

                </tr>

                <tr>

                    <th scope="row">3</th>

                    <td>Larry</td>

                    <td>the Bird</td>

                    <td>@twitter</td>

                    <td><input type="button" class="btn btn-danger" data-toggle="modal" line_num="3" value="delete"/>

                    </td>

                </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>

<script>

    $(".btn.btn-danger").click(function () {

        var line_num = $(this).attr("line_num");  //一行数据的id值

        var _this = $(this);  //选择删除的那一行

        var csrf = $("[name=csrfmiddlewaretoken]").val();  //获取csrf input的value值

        swal({

                title: "亲，您确定删除吗？",

                text: "删除可就找不回来了哦！",

                type: "warning",

                showCancelButton: true,

                confirmButtonColor: "#DD6B55",

                confirmButtonText: "确定删除！",

                cancelButtonText: "取消删除！",

                closeOnConfirm: false,

                closeOnCancel: false

            },

            function (isConfirm) {

                if (isConfirm) {

                    $.ajax({

                        url: "/ajax_handle/",

                        type: "post",

                        data: {

                            'id': line_num,

                            csrfmiddlewaretoken: csrf,

                        },

                        success: function (data) {

                            var data = JSON.parse(data);  //反序列化数据

                            if (data.state) { //判断json的状态

                                swal("删除成功！", "记录已经被删除。",

                                    "success");

                                _this.parent().parent().remove();  //移除tr标签

                            } else {

                                swal("删除失败！", "删除失败，请重试!)",

                                    "error");

                                window.location = "/index/";  //跳转首页

                            }

                        }

                    });

                } else {

                    swal("取消！", "你的数据是安全的:)",

                        "error");

                }

            });

    });

</script>

</body>

</html>

注意：在input里面定义的line_num是一个自定义属性，属性名，可以随便。

删除一条记录，效果如下：

注意：页面并没有刷新。那么第2条记录，是如何没有的呢？是用DOM操作，删除掉的！

SweetAlert插件 弹框插件的更多相关文章

  1. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  2. vue项目中使用vue-layer弹框插件

    vue-layer弹框插件  安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = lay ...

  3. 弹框插件self(动效兼容到IE9，功能兼容IE6)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. SweetAler弹框插件与分页器插件

    目录 SweetAlert插件 自定义分页器 使用Django向数据库批量插入数据 自定义分页器的思路 自定义分页器组件 SweetAlert插件 sweetalert是一款基于Bootstrap的专 ...

  5. 自己写的jquery 弹框插件

    html部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  6. jquery Dialog弹框插件

    function Dialog(options) { var defaults = { // 默认值. title: '', // 标题文本,若不想显示title请通过CSS设置其display为no ...

  7. vue自定义插件-弹框

    <template> <transition name="msgbox"> <div v-if="show" class=&quo ...

  8. jquery Dialog弹框插件使用

    var dialog = new Dialog({ title: '购物车', type: 'url', width: 520, content: "Uplolo.aspx", s ...

  9. layer弹框插件使用

    需要在jquery之后导入 <link rel="stylesheet" href="${pageContext.request.contextPath }/js/ ...

随机推荐

  1. css 设置滚动条的样式

    /*移动端显示滚动条*/ .layui-table-body::-webkit-scrollbar { -webkit-appearance: none; } .layui-table-body::- ...

  2. Chapter 3 Phenomenon——9

    "You were over there," I suddenly remembered, and his chuckle stopped short. “你之前不在这里”我突然记 ...

  3. eclipse maven插件创建maven项目

    1.下载好maven压缩包http://maven.apache.org/ ,解压后放到想要安装的目录,如E:/server/maven,然后配置好maven环境变量,找到maven安装目录下conf ...

  4. Java 集合框架（二）—— ArrayList

    二.数组列表 —— ArrayList 1.构造方法 ArrayList 是 Java 中的动态数组,底层实现就是对象数组,只不过数组的容量会根据情况来改变. 它有个带 int 类型参数的构造方法,根 ...

  5. Java并发编程笔记之ThreadLocal源码分析

    多线程的线程安全问题是微妙而且出乎意料的,因为在没有进行适当同步的情况下多线程中各个操作的顺序是不可预期的,多线程访问同一个共享变量特别容易出现并发问题,特别是多个线程需要对一个共享变量进行写入时候, ...

  6. Nodejs学习笔记（五）—Express安装入门与模版引擎ejs

    前言 前面也学习了一些Node.js的基本入门知道,现在开始进入Web开发的部分: Node.js提供了http模块,这个模块中提供了一些底层接口,可以直接使用,但是直接开发网站那还是太累了,所以ht ...

  7. 8分钟丨教你玩转 API

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由织云平台团队发表于云+社区专栏 背景 当下,业界越来越多公司在项目架构设计时,会采用微服务架构.微服务架构,可以让我们的产品有更好的扩 ...

  8. Fiddler实现手机抓包——小白入门(转载csdn)

    手机用fiddler抓包 电脑最好是笔记本,这样能和手机保持统一局域网内:其他不多说,直接说步骤了. 一.对PC(笔记本)参数进行配置    1. 配置fiddler允许监听到https(fiddle ...

  9. 网络爬虫（一）：配置selenium、pycharm（windows平台）

    最近在学习爬虫的编写,使用selenium模块时候,遇到了很多坑,本blog的目的是总结一下遇到的坑和解决办法,以便后来人少走弯路! 以下介绍均以Python3.x为基准进行,基于windows平台的 ...

  10. 添加Access-Control-Allow-Origin主机头, 授权资源跨站访问

    时间 2014-09-24 22:02:48  All by Neil 原文  https://blog.byneil.com/添加access-control-allow-origin主机头-授权资 ...