文档

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. 《剑指offer》二叉树的深度

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  2. 记录MYSQL中SQL语句的一个坑.

    MYSQL5.7 假设我们有一个表 : h_member_cards_my  (ID, WXOPEN_ID) 表中有一条记录如下: 理论上第二个SQL应当是可以查询得到一条数据的, 结果却为 Empt ...

  3. 重置studio 3T 14天试用

    重置studio 3T 14天试用 bat 脚本 @echo off ECHO Reset Studio 3T Date of use ... FOR /f "tokens=1,2,* &q ...

  4. 利用阿里云搭建frp实现外网远程桌面链接内网电脑

    主要应用场景:针对学生放假回家使用外网无法远程操作学校的服务器或者电脑,这里通过阿里云的云服务器搭建一个frp服务,实现内网穿透,从而可以直接通过远程桌面或者其他工具实现对校园网内的服务器或者电脑进行 ...

  5. 948. Bag of Tokens

    https://leetcode.com/problems/bag-of-tokens/ 一开始觉得应该是个dp 题,把所有结果搜出来然后max 一下.实现以后发现组合太多了,非常慢,即使加上memo ...

  6. Archiver 3 for Mac(解压缩工具) ,想压缩解压慢一点就这么难!

    Archiver 3 for Mac是一款分割合并解压缩工具,简单实用且功能齐全,你只需简单的拖放文件就可以进行压缩,还可以设定解压密码,从而保护自己的隐私.如果文件很大你还可以切割文件.Archiv ...

  7. 神器PHPStorm个人最常用快捷键

    PHPStorm是目前PHP开发者最常用的IDE之一,善用快捷键可以极大地提升效率,网上有很多盘点,多而全,但很多要么不实用,要么操作不方便,下面盘点一下个人平时最常用的,亲测有效. CTRL+N 查 ...

  8. pycharm中range的应用

    v = range(100) for item in v: print (item) #输出结果是0 1 2 3 ......99 这是在python3中实现的,python2中不一样 下面是一个从大 ...

  9. redis与memacache的区别(转)

    redis和memecache的不同在于:1.存储方式:memecache 把数据全部存在内存之中,断电后会挂掉,数据不能超过内存大小redis有部份存在硬盘上,这样能保证数据的持久性.2.数据支持类 ...

  10. Java中 StringTokenizer 的用法

    一.StringTokenizer 1.1 StringTokenizer简介及其构造函数的三种形式: StringTokenizer类是字符串分割解析类型,其属于java.util包,在使用之前需要 ...