今天逛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. jfinal框架新手使用之路及开发心得

    从接触jfinal这个框架到现在差不多也有一个的时间了,因为之前接触的都是像spring ,springMVC,mybatis,struts2,hibernate这种传统,大多数公司都在用的这种框架. ...

  2. TCP常见的定时器三次握手与四次挥手

    1.TCP常见的定时器 在TCP协议中有的时候需要定期或者按照某个算法对某个事件进行触发,那么这个时候,TCP协议是使用定时器进行实现的.在TCP中,会有七种定时器: 建立连接定时器(connecti ...

  3. Python--my first try!

    我所用的编译器是:Python 3.6.0 我之所以在一开始就说我的编译器是因为不同的编译器,不同的版本在代码的写法上会有一些区别! 比如:在我所用的版本3中print的用法是Print (" ...

  4. 怎么在linux ubuntu 上的nginx 绑定域名

    前一篇介绍了,如果在ubuntu上运行nodejs,毕竟访问的时候都是用ip地址+端口号,但是上production 环境都需要域名的,IP地址当然不行 读过上一篇的朋友知道了,如果在upstart ...

  5. Xamarin Android绑定微信SDK

    现在几乎所有的APP都集成了向微博,微信等社交平台分享的功能.这些社交平台官方也提供了SDK让开发者使用,对于Android和IOS平台而言,只需要下载官方的SDK,按照官方说明文档进行集成就可以轻松 ...

  6. WAS 部署 Birt 报表出现 error.CannotStartupOSGIPlatform 和 更新web.xml

    在WAS7.0中部署Birt报表会出现error.CannotStartupOSGIPlatform错误,通常需要这样修改 1.依次打开Applications->WebSphere enter ...

  7. 双向lstm-crf源码的问题和细微修改

    别人的源码地址:https://github.com/chilynn/sequence-labeling/ 如果你训练就会发现loss降到0以下,按照他设定的目标函数,loss理论上应该是大于0的,仔 ...

  8. Linux Command Line(II): Intermediate

    Prerequisite: Linux Command Line(I): Beginner ================================ File I/O $ cat > a ...

  9. openstack使用openvswitch实现vxlan组网

     openstack使用openvswitch实现vxlan openstack环境: 1 版本:ocata 2 系统:ubuntu16.04.2 3 控制节点 1个 + 计算节点 1个 4 控制节点 ...

  10. laravel 中使用ajax和vue总结

    最近写一个项目是基于laravel框架的,这个框架传言是为艺术而创作的优雅框架,简洁分明的风格,很吸引我,所以最近研究比较多.本次就是基于该框架然后将Vue插件加入实现一定的功能,vue插件本身强大, ...