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. Nodejs学习笔记（十六）—Pomelo介绍&入门

    前言&介绍 Pomelo:一个快速.可扩展.Node.js分布式游戏服务器框架 从三四年前接触Node.js开始就接触到了Pomelo,从Pomelo最初的版本到现在,总的来说网易出品还算不错 ...

  2. 玩转mongodb（二）：mongodb基础知识

    常用基本数据类型: null null用于表示空值或者不存在的字段: {"data":null} 布尔型 布尔类型只有两个值,true和false: {"data&quo ...

  3. 笔记二：python编码详解

    一:学习内容 python编码讲解 python编码说明 python中文乱码解决三部曲 二:python编码讲解 1. ASCII编码 美国信息交换标准代码(American Standard Co ...

  4. java面试⑥框架部分

    2.5.1 什么是框架: 2.5.2 MVC模式 2.5.3 MVC框架 2.5.4 简单讲一下struts2的执行流程 2.5.5 Struts2中的拦截器,你都用它干什么? 2.5.6 简单讲一下 ...

  5. 细说setTimeout/setImmediate/process.nextTick的区别

    node.js中的非IO的异步API提供了四种方法,分别为setTimeOut(),setInterval(),setImmediate()以及process.nextTick(),四种方法实现原理相 ...

  6. .NET创建WebService服务简单的例子

    Web service是一个基于可编程的web的应用程序,用于开发分布式的互操作的应用程序,也是一种web服务 WebService的特性有以下几点: 1.使用XML(标准通用标记语言)来作为数据交互 ...

  7. Deep Q-Network 学习笔记（五）—— 改进③：Prioritized Replay 算法

    也就是优先采样,这里的推导部分完全没看懂 Orz,这里也只是记录实现代码. 也就是看了以下两篇文章对应做了实现. 莫烦老师的教程: https://morvanzhou.github.io/tutor ...

  8. CentOS普通用户没有sudo权限

    sudo是linux系统管理指令,是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具,如halt,reboot,su等等.这样不仅减少了root用户的登录 和管理时间,同样也提高了安全 ...

  9. CentOS6.8启动Tomcat无法访问

    今天笔者在CentOS6.8的生产环境上配置Java环境,安装JDK,部署Tomcat,这本来是很简单的一件事,可是最后发现通过IP一直访问不了Tomcat的默认页面. 图1. 无法访问Tomcat默 ...

  10. 《码出高效 Java开发手册》第五章 异常与日志

    码云: https://gitee.com/forxiaoming/JavaBaseCode/blob/master/EasyCoding/src/exception/index.md 5.2 try ...