今天逛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. POJ 3126 math（BFS）

    Prime Path Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 21581   Accepted: 11986 Desc ...

  2. Java版 QQ空间自动登录无需拷贝cookie一天抓取30WQQ说说数据&流程分析

    QQ空间说说抓取难度比较大,花了一个星期才研究清楚! 代码请移步到GitHub GitHub地址:https://github.com/20100507/Qzone [没有加入多线程,希望你可以参与进 ...

  3. 一步一步学Vue (一)

    vue应该是前端主流框架中的集成大成者,它吸取了knockout,angular,react设置avalon的经验,支持各种模式写法,入门很简单,从本章开始,会记录学习vue中的点点滴滴,以笔记的形式 ...

  4. Hibernate学习之一对多关联

    注意事项: 1.单向一对多  只需在“一”放进行配置2.双向一对多  需要在关联双方都加以配置,而且需要在一的一方设置inverse=true 首先是实体类: TAddress.java(多的一方) ...

  5. Spring mybatis源码篇章-SqlSessionFactoryBean

    前言:通过实例结合源码的方式解读,其中涉及到的文件来自于博主的Github毕设项目SchoolActivity_WxServer,引用的jar包为mybatis-spring-1.3.0.jar Sp ...

  6. HTML随笔1

    1.编号列表: <ol type="A" start="1">    //type中有"A","1",&qu ...

  7. ubuntu中vim下按上下左右键时输入A、B、C、D的问题

    ubuntu下使用vi 进行编辑文件时,按上下左右键时,会输入A.B.C.D,这个用起来很不方便.网上查得此问题的原因是: ubuntu系统自带的 vi 不完整导致,解决方法:安装完整的vi $ su ...

  8. ajax-jquery方法-初步入门01（整理)

    -----------------------------------2017.07.21写----------------------------------------- 相比较原生javascr ...

  9. 谈谈渲染，玩玩nginx——前后端分离，转发请求到Tomcat的尝试

    一.谈谈"渲染" 相信好多人都挺听过"渲染"这个词,但不清楚它是什么意思?前端开发以为这是后端的活儿,后端开发以为是前端的事儿,推着推着就不了了之.其实渲染很简 ...

  10. NOIP 2001 提高组 题解

    NOIP 2001 提高组 题解 No 1. 一元三次方程求解 https://vijos.org/p/1116 看见有人认真推导了求解公式,然后猥琐暴力过的同学们在一边偷笑~~~ 数据小 暴力枚举即 ...