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- ...
随机推荐
- 微信H5支付开发(maven仓库版)
官方文档:https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1 开发之前确认开通了H5支付功能 一.安装微信sdk 二.创建config ...
- ansible的modules
fetch :从远端服务器拉取文件到本地 dest 依赖 本地存放拉取到的文件路径, 如果flat=yes,则会在该路径下直接存放文件, 如果flat=no,则会在该路径下生成每个服务器的in ...
- GCJ-02火星坐标系和WGS-84坐标系转换关系
GCJ-02火星坐标系和WGS-84坐标系转换关系 WGS-84:GPS坐标系 GCJ-02:火星坐标系,国测局02年发布的坐标体系,高德,腾讯等使用. BD-09:百度坐标系,百度自研,百度地图使用 ...
- git 仓库中删除历史大文件
git 仓库中删除历史大文件 在git中增加了一个很大的文件,而且被保存在历史提交记录中,每次拉取代码都很大,速度很慢.而且用删除 提交历史记录的方式不是很实际. 以下分几个步骤介绍如何减小.git文 ...
- 浅谈Java反射
什么是反射? JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:这种动态获取信息以及动态调用对象方法的功能称为java语 ...
- quartz之CronExpression表达式
一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素.按顺序依次为1.秒(~).分钟(~).小时(~).天(月)(~,但是你需要考虑你月的天数).月(~).天(星期)(~ =SUN 或 SU ...
- [C++一本通-图论算法] 例4-4 最小花费
题目描述 在n个人中,某些人的银行账号之间可以互相转账.这些人之间转账的手续费各不相同.给定这些人之间转账时需要从转账金额里扣除百分之几的手续费,请问A最少需要多少钱使得转账后B收到100元. 输入输 ...
- Tesseract-ocr 工具使用记录
1.很多地方可以下载Tesseract-ocr工具,同时下载jTessBoxEditor方便之后的训练使用 2.下载Tesseract-ocr后可以放在任何地方,但是需要设置环境变量,或者在CMD当中 ...
- H5上传功能
近期开发一个关于微信公总号二次开发中,上传图片的需求,测试几个开源插件,更新一些心得,有需要可留言!!! plupload plupload多张上传图片的一个参考demo ajaxFileUpload ...
- linux configure 应用
linux下configure命令详细介绍 2018年01月11日 15:02:20 冷月霜 阅读数:705 标签: configure 更多 个人分类: 数据库技术 Linux环境下的软件安装, ...