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. mybatis异常：Error instantiating class com.psc.bean.User with invalid types () or values ().

    Error instantiating class com.psc.bean.User with invalid types () or values (). 是由于bean类没有无参构建方法,添加一 ...

  2. Centos虚拟机SVN的安装和使用http方式访问svn服务器

    1.查看是否安装旧版SVNrpm -qa | grep subversion2.卸载旧版本SVNyum remove subversion3.安装SVNyum -y install subversio ...

  3. mysql空间扩展 VS PostGIS

    http://www.cnblogs.com/LBSer/p/3629149.html 功能 Mysql spatial extension  PostGIS 空间索引 仅MyISAM支持R树索引,I ...

  4. python迭代器、生成器、装饰器

    1 迭代器 这里我们先来回顾一下什么是可迭代对象(Iterable)? 可以直接作用于for循环的对象统称为可迭代对象,即Iterable. # 一是集合数据类型,如list.tuple.dict.s ...

  5. [经典]网关,DNS,DHCP三者关系详解

    什么叫网关的精解 Sample Text转自(协议分析论坛)计算机主机网关的作用是什么?假设你的名字叫小不点,你住在一个大院子里,你的邻居有很多小伙伴,在门口传达室还有个看大门的李大爷,李大爷就是你的 ...

  6. rails常用验证方法

    validates_presence_of       :login,  :message => "用户名不能为空!" validates_length_of         ...

  7. ZOJ 1203 Swordfish（Prim算法求解MST）

    题目: There exists a world within our world A world beneath what we call cyberspace. A world protected ...

  8. 【解决】 无法打开包括文件:“windows.h”: No such file or directory

    vs编译时错误: 无法打开包括文件:“windows.h”: No such file or directory 出现这种错误什么都不用配置(环境变量),最好办法是将VS安装在C盘,让开发工具自动包含 ...

  9. 撩课-Web大前端每天5道面试题-Day19

    1.实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制 考察点1:对于基本数据类型和引用数据 ...

  10. Springboot集成SpringData JPA

    序 StringData JPA 是微服务框架下一款ORM框架,在微服务体系架构下,数据持久化框架,主要为SpringData JPA及Mybatis两种,这两者的具体比较,本文不做阐述,本文只简单阐 ...