sweetalert------一个非常萌的alert!
今天逛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 ...
- Vscode个性化设置：让一个小萌妹陪你敲代码
前言 大家平时都用什么代码编辑器啊!我个人比较喜欢用vscode,因为有以下几点: 开源,免费: 自定义配置 集成git 智能提示强大 支持各种文件格式(html/jade/css/less/sass ...
随机推荐
- 新篇章之我的java学习之路下
昨天写下了人生的第一篇博客,今天接着写我的java学习之路有关开发及框架的学习过程. 想要学好java语言,只学习一些java的基本语法对实际开发中的用处还是不大的,所以我们还要掌握一些有关javaW ...
- jmeter连接配置带跳板机（SSH）的mysql服务器
jmeter连接配置mysql服务器时,如果数据库服务器没有通过ssh连接,则只需要配置相应的jdbc参数就可以了,即请求域名或ip地址:3306,如果数据库服务器是通过SSH连接的,那需要通过中间远 ...
- IntentService与Service的区别
IntentService是继承并处理异步请求的一个类,在IntentService内有一个工作线程来处理耗时操作,启动IntentService的方式和启动传统的Service一样,同时,当任务执行 ...
- PHP中json_encode与json_decode
一.json_encode() 对变量进行JSON编码, 语法: json_encode ( $value [, $options = 0 ] ) 注意:1.$value为要编码的值,且该函数只对UT ...
- RabbitMq学习一入门篇（hello world）
简介 RabbitMQ是一个开源的AMQP实现,服务器端用Erlang语言编写,支持多种客户端,如:Python.Ruby..NET.Java,也是众多消息队列中表现不俗的一员,作用就是提高系统的并发 ...
- JAVA 笔记 ClassLoader.getResourceAsStream() 与 Class.getResourceAsStream()的区别
Class.getResourceAsStream() 会指定要加载的资源路径与当前类所在包的路径一致. 例如你写了一个MyTest类在包com.test.mycode 下,那么MyTest.c ...
- HDU 6034---Balala Power!（搜索+贪心）
题目链接 Problem Description Talented Mr.Tang has n strings consisting of only lower case characters. He ...
- Linux常用命令和常见问题解决<------>第一章
查看文件下面所有的隐藏目录:ls -al ~ ls -al ~ls -a -l ~可以发现三条命令执行结果是一致的,原因:因为ls为命令 后面的参数要以空格来区分,不论几个空格 shell都会视为一体 ...
- IDEA 2017注册码破解方法（转）
进入ide主页面,help-register-license server,然后输入 http://idea.iteblog.com/key.PHP(注意:php要小写)即可~ 如下图: 点击 Act ...
- Redux源码分析之compose
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...