今天逛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!的更多相关文章

  1. [Swift通天遁地]一、超级工具-(14)使用SweetAlert制作漂亮的自定义Alert窗口

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. 用vue2.x注册一个全局的弹窗alert组件

    一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...

  3. sweetalert : 一个比较好看的弹出框

    1.引入 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"> </script& ...

  4. Vue初识：一个前端萌新的总结

    一.前言 时隔三年,记得第一次写博客还是2015年了,经过这几年的洗礼,我也从一个后端的小萌新变成现在略懂一点点知识的文青.如今对于前端的东东也算有一知半解,个人能力总的来说,也能够独立开发产品级项目 ...

  5. 用vue2.x注册一个全局的弹窗alert组件、confirm组件

    一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...

  6. ...续上文（一个小萌新的C语言之旅）

    我们继续上次没介绍完的继续讲: 下面我们说一下二进制,二进制是计算技术中广泛采用的一种 数制. 二进制数据是用0和1两个 数码来表示的数.它的基数为2,进位规则是“逢二进一”.那么二进制怎么转化为十进 ...

  7. 一个DBA萌新的烦恼

    莫名其妙也好机缘巧合也罢,现在我成为了一名MySQL DBA. 为什么: 1.为什么leader让我转到DBA? 首先,我本身学习运维管理的时候就接触过数据库(mysql,redis),算是自身的优势 ...

  8. 【解决了一个小问题】alert manager中的cluster.advertise-address参数是什么意思？

    如果在启动 alert manager的时候,不填写参数: /usr/bin/alertmanager --config.file=/etc/alert_manager/alertmanager.ya ...

  9. Vscode个性化设置：让一个小萌妹陪你敲代码

    前言 大家平时都用什么代码编辑器啊!我个人比较喜欢用vscode,因为有以下几点: 开源,免费: 自定义配置 集成git 智能提示强大 支持各种文件格式(html/jade/css/less/sass ...

随机推荐

  1. crm维护踩坑记(一)

    目录 antd es6 Object.entries() Object.keys() Object.getOwnPropertyNames() 很神奇的用法!!! eslint 傻逼 其他 参考 an ...

  2. nyoj_118:修路方案（次小生成树）

    题目链接 题意,判断次小生成树与最小生成树的权值和是否相等. 豆丁文档-- A-star和第k短路和次小生成树和Yen和MPS寻路算法 法一: 先求一次最小生成树,将这棵树上的边加入一个向量中,再判断 ...

  3. jenkins - MultiJob使用

    我们如果使用jenkins需要由串行,并行,传递参数和等待执行的功能的话,那我们会用到jenkins里面的两个东西:MultiJob和pipeline 这里我介绍下MultiJob的使用 实例任务的拓 ...

  4. 对JavaScript闭包的理解

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 在开始了解闭包前我们必须要先理解JavaScript的变量作用域. 一.变量的作用域无非就是两 ...

  5. Spring源码情操陶冶-ContextLoader

    前言-阅读源码有利于陶冶情操,本文承接前文Spring源码情操陶冶-ContextLoaderListener 静态代码块内容 ContextLoader在被主动调用的时候,会执行其的一个静态块,代码 ...

  6. gdb命令中查看地址之x命令

    可以使用examine命令(简写是x)来查看内存地址中的值.x命令的语法如下所示: x/<n/f/u> <addr> n.f.u是可选的参数. n是一个正整数,表示需要显示的内 ...

  7. C语言开发面试题

    (以下是题主参加的一家偏向Linux平台开发的公司软件岗位笔试题,分享原题,后面附上题主91分的部分参考答案^V^) 一.(8分)请问一下程序输出什么结果? char *getStr(void) { ...

  8. 使用jquery获取url及url参数的方法

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javasc ...

  9. python--DenyHttp项目（1）--socket编程：客户端与服务器端

    查找了许多资料,实现了客户端与服务器端的连接,通过虚拟机进行测试 服务器端IP:192.168.37.129 端口1122 客户端IP: 192.168.37.1 端口1122 Server: #co ...

  10. Mook第八周习题 单词长度（4分）(1)题

    题目内容: 你的程序要读入一行文本,其中以空格分隔为若干个单词,以'.'结束.你要输出这行文本中每个单词的长度.这里的单词与语言无关,可以包括各种符号,比如"it's"算一个单词, ...