文档

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. The Quad - Directory Explorer(一款四窗口的文件资源管理器)

    官网:http://www.q-dir.com/ 参考这位兄弟的介绍:https://www.cnblogs.com/clso/p/4694486.html 一款四窗口的文件资源管理器.

  2. 基于cxf的app文件上传接口(带回显功能)

    1.SaleImpl @Override public String uploadPic(final List<Attachment> attachments) { return this ...

  3. vue结构详解

    相关文件和文件夹的含义: build 文件夹: 里面是对 webpack 开发和打包的相关设置,包括入口文件.输出文件.使用的模块等:config 文件夹: 主要是指定开发和打包中的静态资源路径.要压 ...

  4. CSS(Cascading Style Sheet)简述

    CSS(Cascading Style Sheet)简述 什么是CSS? css是指层叠样式表 css定义了如何显示HTML元素 css的诞生是为了解决内容与表现分离的问题,可以极大地提高工作效率 样 ...

  5. pwn易忘操作原理笔记

    堆溢出漏洞: 一.null-byte-off-by-one 漏洞原理:由于输入操作失误,导致可以把size最低字节修改为\x00,overlapchunk利用. 构造 1.freeB,此时C的pres ...

  6. Mac下brew安装JDK的教程

    ---恢复内容开始--- 安装命令: brew cask install java 默认应该会下载jdk7 也可以指定下载版本brew cask install java6 注意: brew inst ...

  7. Scrapy框架之CrawlSpider

    提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法二:基 ...

  8. H5如何解监听页面退出需求???

    事发背景(时间较久): 在一个阳光明媚的一天,这天lz正在工位上悠闲的敲着代码:说时迟那时快,运营小姐姐箭步过来,让lz做一个挽留弹窗:我当时一听这TM不是流氓么.于是便有了以下的故事... 如何实现 ...

  9. js常会问的问题:找出字符串中出现次数最多的字符。

    一.循环obj let testStr = 'asdasddsfdsfadsfdghdadsdfdgdasd'; function getMax(str) { let obj = {}; for(le ...

  10. JS精度问题(0.1+0.2 = 0.3吗?)

    一.引出问题 0.1+0.2 = 0.3吗?在JS中是这样的吗?我们写个测试代码不就知道了吗? 结果出人意料,并不像我们所想象的那样.那么这到底是为什么呢? 二.原因分析 JS浮点数存储机制: 三.解 ...