今天逛github的时候发现一个非常萌的alert，比IE和各大浏览器的原alert美多惹。
github项目地址：https://github.com/t4t5/sweetalert
通过git clone到本地
项目本身也有一个非常Nice的说明文档，跟着操作就能看懂各种做好的萌萌哒的alert了。
参考：https://www.ludu.co/lesson/how-to-use-sweetalert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index1</title>
<script type="text/javascript" src="sweetalert.min.js"></script>
<link rel="stylesheet" href="sweetalert.css">
</head>
<body>
<script>
//sweetAlert("Hello world!")
sweetAlert({
title: "Oops!",
text: "Something went wrong on the page!",
type: "error"
}); </script>
</body>
</html>
配合jQuery还可以设置其他的alert哦
<button class="delete-photo" data-photo-id="">Delete photo</button> <script>
$('button.delete-photo').click(function() {
var photoId = $(this).attr("data-photo-id");
deletePhoto(photoId);
}); function deletePhoto(photoId) {
swal({
title: "Are you sure?",
text: "Are you sure that you want to delete this photo?",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "Yes, delete it!",
confirmButtonColor: "#ec6c62"
}, function() {
$.ajax({
url: "/api/photos/" + photoId,
type: "DELETE"
})
.done(function(data) {
swal("Deleted!", "Your file was successfully deleted!", "success");
})
.error(function(data) {
swal("Oops", "We couldn't connect to the server!", "error");
});
});
}
</script>
sweetalert------一个非常萌的alert!的更多相关文章
-
[Swift通天遁地]一、超级工具-(14)使用SweetAlert制作漂亮的自定义Alert窗口
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
-
用vue2.x注册一个全局的弹窗alert组件
一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...
-
sweetalert : 一个比较好看的弹出框
1.引入 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"> </script& ...
-
Vue初识：一个前端萌新的总结
一.前言 时隔三年,记得第一次写博客还是2015年了,经过这几年的洗礼,我也从一个后端的小萌新变成现在略懂一点点知识的文青.如今对于前端的东东也算有一知半解,个人能力总的来说,也能够独立开发产品级项目 ...
-
用vue2.x注册一个全局的弹窗alert组件、confirm组件
一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...
-
...续上文（一个小萌新的C语言之旅）
我们继续上次没介绍完的继续讲: 下面我们说一下二进制,二进制是计算技术中广泛采用的一种 数制. 二进制数据是用0和1两个 数码来表示的数.它的基数为2,进位规则是“逢二进一”.那么二进制怎么转化为十进 ...
-
一个DBA萌新的烦恼
莫名其妙也好机缘巧合也罢,现在我成为了一名MySQL DBA. 为什么: 1.为什么leader让我转到DBA? 首先,我本身学习运维管理的时候就接触过数据库(mysql,redis),算是自身的优势 ...
-
【解决了一个小问题】alert manager中的cluster.advertise-address参数是什么意思？
如果在启动 alert manager的时候,不填写参数: /usr/bin/alertmanager --config.file=/etc/alert_manager/alertmanager.ya ...
-
漂亮的各种弹出框 sweet alert
Sweet Alert 是一个替代传统的 Alert 的提示效果.SweetAlert 自动居中对齐在页面*,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒. 还带下拉 几种 动画效果 弹窗 ...
随机推荐
-
Openstack搭建相关问题
1.Openstack添加新磁盘到根分区 初始化分区sdb为物理卷pv pvcreate /dev/sdb //初始化 pvdisplay //显示物理卷信息 vgextend centos /d ...
-
Sigleton 单例模式 的简单应用
需求:一个简单的后台java程序,收集信息,并将信息发送到远端服务器. 实现:实现一个后台线程,实时处理发送过来的信息,并将信息发送到服务器. 技术要点: 1.单例模式 2.队列 并没有实现全部代码, ...
-
新浪微博客户端(9)-实现版本新特性的ViewPager
"DJNewFeatureViewController.m" #import "DJNewFeatureViewController.h" #define NE ...
-
ZOJ3718 Diablo II(状态压缩dp)
题意:一个人物有K(K<=7)种技能,每种技能都有bi,ci,di值,表示该技能不能点超过bi次,每点一次加ci,点满bi次有一个附加得分di.然后还有N件武器,武器本身会有能力加成,然后每个武 ...
-
uint8_t / uint16_t / uint32_t /uint64_t 是什么数据类型（转）
在nesc的代码中,你会看到很多你不认识的数据类型,比如uint8_t等.咋一看, 好像是个新的数据类型,不过C语言(nesc是C的扩展)里面好像没有这种数据类型啊!怎么又是u又是_t的?很多人有这样 ...
-
ruby 疑难点之—— yield 和 yield self
yield 所有的"方法(methods)"隐式跟上一个"块(block)"参数. 块参数也可以明确给定,形式就是在参数前面加一个"&&quo ...
-
hihoCoder 1389 Sewage Treatment 【二分+网络流+优化】 (ACM-ICPC国际大学生程序设计竞赛北京赛区(2016)网络赛)
#1389 : Sewage Treatment 时间限制:2000ms 单点时限:2000ms 内存限制:256MB 描述 After years of suffering, people coul ...
-
android客户端向服务器发送请求中文乱码的问
android客户端向服务器发送请求的时候,并将参数保存到数据库时遇到了中文乱码的问题: 解决方法: url = "http://xxxx.com/Orders/saveorder.html ...
-
.Net memory management Learning Notes
Managed Heaps In general it can be categorized into 1) SOH and 2) LOH. size lower than 85K will be ...
-
团队第五次 # scrum meeting
github 本此会议项目由PM召开,召开时间为4-9日晚上9点 召开时长15分钟 任务表格 袁勤 负责协调前后端 https://github.com/buaa-2016/phyweb/issues ...