SweetAlert插件弹框插件

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',
]

View Code

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

def ajax_handle(request):if request.method == "POST":print(request.POST)#定义一个状态，假装删除成功了response = {"state": True}return HttpResponse(json.dumps(response))  # 返回jsonelse:return HttpResponse("非法请求,必须是POST")

View Code

修改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>

View Code

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

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

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

转载于:https://www.cnblogs.com/zhaoyunlong/p/9639059.html

SweetAlert插件弹框插件相关推荐

自己封装一个弹框插件
弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如经典的artDialog 炫酷的Sweetalert等等.. 但是慢慢地你其实会发现通常情况下需求定制化要求较高, ...
vue---安装使用vue-layer弹框插件
vue安装使用vue-layer弹框插件步骤 (1)安装vue-layer npm install --save vue-layer (2)在[src]目录下的[main.js]中引入vue-laye ...
弹框插件sweetalert
1.SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按 ...
弹框插件self(动效兼容到IE9，功能兼容IE6)
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
html登入弹框插件,基于jQuery的弹出框插件
html如下: $(function() { $("#btn01").popwin({ element: "#box01", title: "请填写以 ...
idea插件开发(01)---最简单的helloworld版,不需要知道原理,先跟我做一个最简单的弹框插件
前言用了那么多idea插件,也想自己做一个插件,下面就是入门版本你不需要先知道所有的概念,先跟着我的步骤做一个小;例子,后面再说原理相关概念看后面一篇本次以windos系统为例开始 1.你得 ...
vue自定义插件-弹框
<template><transition name="msgbox"><div v-if="show" class=" ...
lottie插件_RN常用插件集
前言:从事RN开发快一年了,开发过程中遇到许多坑,连滚带爬的都趟过来了,简单总结下常用的RN插件,方便以后查阅. 建议:能自己写的插件就自己写吧,别偷懒,(虽然可能没有别人的好,起码也是自己造的儿子, ...
sweetalert php,SweetAlert-js超酷消息警告框插件
简单介绍 SweetAlert是一款神奇的javascript弹出消息警告框插件.可替换所有alert弹框使用方法要使用该插件,首先要在header中引入以下文件(已打包附件内,上传注意是模版文件 ...

SweetAlert插件弹框插件

下载插件

表格删除一条记录

SweetAlert插件弹框插件相关推荐

最新文章

热门文章

SweetAlert插件 弹框插件

下载插件

表格删除一条记录

SweetAlert插件 弹框插件相关推荐

最新文章

热门文章

SweetAlert插件弹框插件

SweetAlert插件弹框插件相关推荐