文档

sweetalert Api:http://t4t5.github.io/sweetalert/

开源项目源码:https://github.com/t4t5/sweetalert

在文件中首先引入css和js 文件

<link href="/static/js/sweetalert/sweet-alert.css" rel="stylesheet"/>
<!-- jQuery 3 -->
<script src="/static/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/static/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!--操作提示框-->
<script src="/static/js/sweetalert/sweet-alert.min.js"></script>

js代码:

     swal({
title: "操作提示", //弹出框的title
text: "确定删除吗?", //弹出框里面的提示文本
type: "warning", //弹出框类型
showCancelButton: true, //是否显示取消按钮
confirmButtonColor: "#DD6B55",//确定按钮颜色
cancelButtonText: "取消",//取消按钮文本
confirmButtonText: "确定",//确定按钮上面的文档
closeOnConfirm: true
}, function () {
          // 点击确定后执行以下代码
          ..............
          });

效果图

参数说明:

showCancelButton:是否显示取消按钮;

animation:提示框弹出时的动画效果,可选(pop、none、slide-from-top、slide-from-bottom);

timer:设置自动关闭提示框时间(毫秒);

showConfirmButton:是否显示确定按钮;

confirmButtonText:定义确定按钮文本;

cancelButtonText:定义取消按钮文本;

imageUrl:定义弹出框的图片地址;

推荐学习网址:https://sweetalert.js.org/docs/

sweetalert提示框的更多相关文章

  1. 33、Flask实战第33天:sweetalert提示框

    这节我们继续优化,接收到返回值,我们在前端做一些处理,如:密码修改成功,弹出一个成功的提示框.这个提示框我们采用sweetalert 其中xtalert.js是对上面两个文件的一个封装,使得我们用sw ...

  2. 一百零二:CMS系统之sweetalert提示框和使用

    实现效果 css body.stop-scrolling { height: 100%; overflow: hidden; } .sweet-overlay { background-color: ...

  3. 一百零三:CMS系统之使用sweetalert提示框优化返回结果

    在base模板中引用 在修改密码的js中使用 $(function () { $('#submit').click(function (evnet) { evnet.preventDefault(); ...

  4. 提示框插件SweetAlert

    SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框, 它将提示框进行了美化,并且允许自定义, 支持设置提示框标题.提示类型.内容展示图片.确认取消按 ...

  5. 漂亮的提示框SweetAlert使用教程

    一.简介 所使用过的弹出框插件,SweetAlert是最好用的.发展至今,已经有两个版本,一个是原版 t4t5/sweetalert , 一个是分支版 limonte/sweetalert2 ,更新相 ...

  6. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  7. 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

    在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...

  8. Bootstrap:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  9. Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog)

    Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog) Android第三方开源对话消息提示框:SweetAlertDialog(sweet- ...

随机推荐

  1. C# 高级编程03----细节内容

    一.名称空间 1.C#使用Using关键字可以列出所需类的名称控件. 它和C/C++ 中的#include不一样.using语句并没有在这些文件之间建立物理连接 2.使用using给名称空间指定别名 ...

  2. 【mongo】查询超时处理

    使用no_cursor_timeout collection = self.db[tb_name] cols = collection.find(no_cursor_timeout=True) for ...

  3. 1、Jenkins的安装与简单配置

    Jenkins安装 1.安装Jenkins之前先部署安装java环境(java环境安装另外参考安装文档) 注意:Jenkins 需要运行 Java 5以及以上的版本. 安装环境:CentOS7.3+J ...

  4. Django—常用功能

    索引 一.静态文件 二.中间件 三.Admin站点 3.1 列表页选项 3.2 编辑页选项 3.3 重写模板 四.上传图片 4.1 在管理页面admin中上传图片 4.2 自定义form表单中上传图片 ...

  5. Scrapy 隐含 bug: 强制关闭爬虫后从 requests.queue 读取的已保存 request 数量可能有误

    问题描述和解决方案已提交至 Scrapy issues: The size of requests.queue may be wrong when resuming crawl from unclea ...

  6. SpringBoot主程序注解@SpringBootApplication简单分析

    一.@SpringBootApplication说明这个类是SpringBoot的主配置类,SpringBoot就应该运行这个类的main方法来启动SpringBoot应用: @SpringBootA ...

  7. 【ABP.Net】2.多数据库支持&&初始化数据库

    abp默认连接的数据库是MSSQL,但是在开发过程中往往很多开发者不满足于mssql. 所以这里演示一下把mssql改成postgresql,来进行接下来的系统开发. abp的orm是用EF的.那么我 ...

  8. C#事件委托概念

    事件就是一个狭义的委托,也就是事件是一个用于事件驱动模型的专用委托. 通俗的讲,委托你可以在客户代码中直接调用委托来激发委托指向的函数,而事件不可以,事件的触发只能由服务代码自己触发 也就是说在你的代 ...

  9. [数据结构] 希尔排序 C语言程序

    //由小到大 //希尔排序 void shellSort( long int array[], int length) { int i; int j; int k; int gap; //gap是分组 ...

  10. 记录一次大量CLOSE_WAIT的情况

    近期的项目中,有一个特殊的需求,对于每个客户端程序有若干个机构,对于每个机构有不同的客户端证书,程序间隔一段时间向服务端进行请求,根据请求的成功与否更新各机构的状态(如正常,证书未配置,证书过期等). ...