sweetalert提示框
文档
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提示框的更多相关文章
- 33、Flask实战第33天:sweetalert提示框
这节我们继续优化,接收到返回值,我们在前端做一些处理,如:密码修改成功,弹出一个成功的提示框.这个提示框我们采用sweetalert 其中xtalert.js是对上面两个文件的一个封装,使得我们用sw ...
- 一百零二:CMS系统之sweetalert提示框和使用
实现效果 css body.stop-scrolling { height: 100%; overflow: hidden; } .sweet-overlay { background-color: ...
- 一百零三:CMS系统之使用sweetalert提示框优化返回结果
在base模板中引用 在修改密码的js中使用 $(function () { $('#submit').click(function (evnet) { evnet.preventDefault(); ...
- 提示框插件SweetAlert
SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框, 它将提示框进行了美化,并且允许自定义, 支持设置提示框标题.提示类型.内容展示图片.确认取消按 ...
- 漂亮的提示框SweetAlert使用教程
一.简介 所使用过的弹出框插件,SweetAlert是最好用的.发展至今,已经有两个版本,一个是原版 t4t5/sweetalert , 一个是分支版 limonte/sweetalert2 ,更新相 ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化
在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...
- Bootstrap:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog)
Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog) Android第三方开源对话消息提示框:SweetAlertDialog(sweet- ...
随机推荐
- 04-HTTP协议和静态Web服务器
一.HTTP协议(HyperText Transfer Protocol) 超文本传输协议,超文本是超级文本的缩写,是指超越文本限制或者超链接,比如:图片.音乐.视频.超链接等等都属于超文本. ...
- wtforms组件使用实例及源码解析
WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. WTforms作用:当网站中需要用到表单时,WTForms变得很有效.应该把表单定义为类,作为单独的一个模块. ...
- 【玩转开源】使用 PhoenixSuit 线刷 Android 镜像
先看看效果图: 我这里以BananaPi M2U(全志R40)板子为例,线刷之前,你需要准备这些东西: 1. 硬件:一块全志平台的开发板,一根OTG-USB线,整个过程不需要额外的Power DC供电 ...
- SEH exception with code 0xc0000005 thrown in the test body
在用Visual Studio时遇到这个报错.原因:访问了非法的内存地址. 这个问题不应该被忽略,通常是代码有bug. 解决办法: VS2013: 菜单->Debug->Exception ...
- PHP微信商户支付 - 企业付款到零钱功能(即提现)技术资料汇总
PHP实现微信开发中提现功能(企业付款到用户零钱) 一.实现该功能目的 这几天在小程序里要实现用户从系统中提现到零钱的功能,查了一下文档可以使用 企业付款到用户零钱 来实现: 官方文档:https:/ ...
- SVN 通过Shell Bash 获取项目Reversion号码
接上篇 Jenkins Vue项目自动构建以及构建后续操作 在项目构建完成后,需要提供当前构建的一个唯一标识的东西,并告诉我们的上线系统,这个唯一标识的东西可以让我们在回退线上版本的时候变得很有用, ...
- 玩转GET 和 POST
HTTP 基本概念 HTTP Request Methods GET.POST 专业名称是 HTTP Request Methods.但 HTTP Request Methods 不只是 GET 和 ...
- 关于spring的自动注入
关于spring的自动注入 spring里面可以设置BeanDefinition自动注入类型,默认为AUTOWIRE_NO(不进行自动注入).mybatis里面的扫描接口生成MapperFactory ...
- git 相关学习
1.Git 的一些快捷键 第一次创建本git 本地仓库 :: git init //在本地创建一个 Git仓库 :要在该目录下 第一次 要配置GitHub 的 账号和邮箱: git config ...
- Linux中目录以及路径问题
具体参考:https://www.cnblogs.com/OctoptusLian/p/8546580.html 在Linux中,存在着绝对路径和相对路径 绝对路径:路径的写法一定是由根目录 / 写起 ...