漂亮的弹窗口插件——sweetAlert的使用
想必你已经受够了单调的alert弹窗吧?
为了更好的用户体验性,现在介绍一款漂亮的弹窗口插件——sweetAlert,现在就来介绍它的使用
1、首先在官网下载它的CSS和JavaScript文件:http://mishengqiang.com/sweetalert/
2、在页面的头部初始化插件
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
3、页面加载完成后调用sweetAlert函数
最基本的调用方法:
sweetAlert("Hello world!");
会看到:
带错误提示框的弹窗:
sweetAlert("Oops...", "Something went wrong!", "error");
4、用到项目中:
a、删除时的弹窗:
<button class="btn btn-danger btn-xs del" onClick="check({{$v['id']}})">删除</button>
JS代码:
<script>
function check(id){
swal(
{title:"您确定要删除这条数据吗",
text:"删除后将无法恢复,请谨慎操作!",
type:"warning",
showCancelButton:true,
confirmButtonColor:"#DD6B55",
confirmButtonText:"确定删除!",
cancelButtonText:"取消",
closeOnConfirm:false,
closeOnCancel:false
},
function(isConfirm)
{
if(isConfirm)
{
swal({title:"删除成功!",
text:"您已经永久删除了这条数据。",
type:"success"},function(){window.location="/video/destroy/"+id})
}
else{
swal({title:"已取消",
text:"您取消了删除操作!",
type:"error"})
}
}
)
}
</script>
点击删除时弹出:
点取消:
点确认删除:
b、添加/修改数据成功时弹窗
前面最下面添加JS代码:如果删除成功则弹窗,点击确定跳到首页(可自定义)
@if(Session::get('success'))
<script>
swal({title:"保存成功!",
text:"已成功保存数据",
type:"success"},function(){window.location="/"}
)
</script>
@endif
控制器:如果数据添加成功则返回上一页并将数据带回,存入一次性session
if ($res) {
return redirect()->back()->withInput()->with('success','保存成功!');
}
成功则弹出提示,点击OK返回首页
6、就介绍这么多了,更多用法可参照官网
漂亮的弹窗口插件——sweetAlert的使用的更多相关文章
- 10个漂亮的jQuery日历插件下载【转载】
10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件 日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用 ...
- 一行js弹窗代码就能设计漂亮的弹窗广告
接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一下,欢迎拍砖提意见,js弹窗广告代码如下: ...
- 推荐15款创建漂亮幻灯片的 jQuery 插件
对于设计师,开发者,摄影师或任何创造性的个人和企业,他们自己的网站是展示他们的技能和服务的最佳场所.你可能打算设计一个新的个人作品网站,不管你是从头开始或使用模板,都会需要使用 jQuery 幻灯片插 ...
- 提示框插件SweetAlert
SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框, 它将提示框进行了美化,并且允许自定义, 支持设置提示框标题.提示类型.内容展示图片.确认取消按 ...
- django系列6--Ajax06 使用插件,Sweet-Alert插件
使用SweetAlert插件 GitHub上的下载链接 下载完成后放入django项目静态目录下,在html文件中引入静态文件,下面是script部分 $(".btn-danger" ...
- Vue实战之插件 sweetalert 的使用
安装npm install sweetalert2@7.15.1 --save 封装 sweetalertimport swal from 'sweetalert2' export default { ...
- 推荐一款炫酷的提示框插件SweetAlert
官方网址 http://t4t5.github.io/sweetalert/ 项目地址 https://github.com/t4t5/sweetalert
- 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...
- 推荐简约漂亮的小程序插件 calendar
公司团队制作,主要用于内部使用,觉得这个感觉不错,所以推荐出来,让大家试试~ 日历功能 日历基本功能,自定义样式 先睹为快 使用方法: 1. 在微信小程序管理后台--设置--第三方服务,按 AppID ...
随机推荐
- 顺序查找&二分查找&索引查找
1.查找技术的分类.如下图: 2.什么是顺序查找呢?(无序表) 顺序查找的原理很简单,就是遍历整个列表,逐个进行记录的关键字与给定值比较,若某个记录的关键字和给定值相等,则查找成功,找到所查的记录.如 ...
- build dynamic libraries for iOS and load them at runtime
编译了libmt.dylib, 和 test 程序调用,均正常.在xcode中显示调用正常,隐式调用则出现问题. 提示 dyld: Library not loaded. 即使存在在/usr/lib/ ...
- unity3d中C#与JS的一些区别
unity3d目前支持C#和JS两种脚本语言. 学习过程中发现很多教程使用的是JS语言,自己还是用C#比较多,unity原生使用的是Mono,使用C#会更加接近unity的编程思想. 1.方法的定义, ...
- 《Cracking the Coding Interview》——第3章:栈和队列——题目2
2014-03-18 05:08 题目:实现一个栈,除了能进行push和pop之外,还能在O(1)时间内返回栈中最小的元素. 解法:用另一个“最小栈”存放最小的元素,每当有不小于当前最小值的元素进栈时 ...
- Android 环境变量设置
需要设置以下全局的环境变量 ANDROID_HOME: C:\Users\bellesun\AppData\Local\Android\sdk JAVA_HOME: C:\Program Files ...
- RGB和YUV、YCbCr 以及格式的转换总结
比较好的文章收集链接: https://www.douban.com/note/76361504/ http://blog.sina.com.cn/s/blog_a85e142101010h8n.ht ...
- HDU 4763 Theme Section ( KMP next函数应用 )
设串为str, 串长为len. 对整个串求一遍next函数,从串结尾开始顺着next函数往前找<=len/3的最长串,假设串长为ans,由于next的性质,所以找到的串肯定满足E……E这种形式, ...
- php session 测试
2018-06-22 08:26:30 session指的是默认php提供的文件session形式 当前我的认识是,php并不记录session的过期时间,但是php.ini中有session的垃圾回 ...
- 为啥shmem不回收 | drop_caches
内核在哪里禁止对tmpfs中内存页的回收 mem.limit_in_bytes同样会触发shrink_zones过程! shrink_zones是代码中的直接内存回收路径 1.try_to_free_ ...
- Redis客户端命令
Redis客户端命令 Redis 命令用于在 redis 服务上执行操作. 要在 redis 服务上执行命令需要一个 redis 客户端.Redis 客户端在我们之前下载的的 redis 的安装包中. ...