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. ActiveMQ开发注意要点

    目录1.如何保证消息的成功处理2.避免消息队列的并发3.消息有效期的管理4.过期消息,处理失败的消息如何处理 1.保证消息的成功处理消息发送成功后,接收端接收到了消息.然后进行处理,但是可能由于某种原 ...

  2. 在Bash中定制炫酷的命令提示符

    如果你使用的是Linux桌面(例如:Fedora或者Ubuntu)的话,在Terminal上使用Bash通常是必须地,但是默认的Bash提示符都很普通.本文将提供简单的Bash脚本(通过定制PS1)定 ...

  3. 面试题20：搜索二叉树可能有两个元素发生了交换，如何恢复BST？

    Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...

  4. [Codeforces 932E]Team Work

    Description 题库链接 求 \[\sum_{i=1}^n C(n,i)\times i^k\] \(1\leq n\leq 10^9, 1\leq k\leq 5000\) Solution ...

  5. Node.js之HTTP请求与响应

    在C#.OC中也是客户端发起一个请求,服务端作出响应.我们可以把这个过程抽象理解 . 1.客户端给服务端发起请求相当于向服务端写入一个流(writable) 2.服务端读取客户端的流(readable ...

  6. 在懒加载的Ionic工程中使用 ionic2-auto-complete 组件：Can't bind to 'dataProvider' since it isn't a known property of 'ion-auto-complete'

    问题描述: 在基于懒加载的Ionic工程中,使用ionic2-auto-complete组件(GitHub地址:https://github.com/kadoshms/ionic2-autocompl ...

  7. Bootstrap table 跨页全选

    此代码是针对于bootstrap table中分页的跨页全选. 以下是整个bootstrap的定义 <script type="text/javascript" src=&q ...

  8. linux vi模式下基本命令和快捷键

    移动光标上:k nk:向上移动n行 9999k或gg可以移到第一行 G移到最后一行下:j nj:向下移动n行左:h nh:向左移动n列右:l nl:向右移动n列 w:光标以单词向前移动 nw:光标向前 ...

  9. js中var与let

    问题 for (var iii = 0; iii < 3; iii++) { setTimeout(function(){ console.debug(iii) }, 1000) let let ...

  10. 高并发第六弹:线程封闭(ThreadLocal)

    当访问共享的可变数据时,通常需要使用同步.一种避免使用同步的方式就是不共享数据.如果仅在单线程内访问数据,就不需要同步.这种技术被称为线程封闭. 它其实就是把对象封装到一个线程里,只有一个线程能看到这 ...