今天逛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. js冒泡排序，数组去重

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. （转）linux中项目部署和日志查看

    1 查找进程 ps -ef | grep java   查看所有关于java的进程 root     17540     1  0  2009 ?        01:42:27 /usr/java/ ...

  3. python开发部署时新增数据库中表的方法

    在项目版本让运维部署时,涉及到数据库表的增加问题,想了一下,可以有四种方法 1.使用SQLAlchemy的db.create_all()方法 # -*- coding:utf-8 -*- from f ...

  4. 内核对象kobject和sysfs（4）——kset分析

    内核对象kobject和sysfs(4)--kset分析 从狭义上来说,kset就是kobj的一个再封装而已.在封装之后,提供了针对kset之下所有kobj统一管理的一些方法. 我们还是从结构说起: ...

  5. ajax分页效果、分类联动、搜索功能

    一.使用smarty+ajax+php实现无刷新分页效果 效果图 <!DOCTYPE html> <html lang="en"> <head> ...

  6. git相关的学习资料

    1, 一个比较详细的git使用说明: http://blog.jobbole.com/78960/

  7. java_==和equal方法

    java测试两个变量是否相等有两种方式: 一种是利用"=="运算符 值和对象的判断 一种是利用equals()方法 只是值的判断 1.如果两个变量是基本类型变量,且都是数值类型(不 ...

  8. Redis-事务即简单锁应用

    Redis支持简单的事务, Redis允许一组命令在单一步骤中执行, 事务有两个属性 事务是一个单独的隔离操作, 事务中所有的命令都会序列化, 按照顺序执行. Redis事务是原子性的, 即要么都执行 ...

  9. Python3常用网络编程模块介绍

    一.socket模块 网络服务都是建立在socket基础之上的,socket是网络连接端点,是网络的基础:每个socket都被绑定到指定的IP和端口上: 1.首先使用socket(family=AF_ ...

  10. kickstart自动化安装--tftp+nfs+dhcp

    使用kickstart实现Centos 自动化安装 Kickstart自动化安装简介: 规模化:同时装配多台 服务器 自动化 :安装系统,配置各种服务 远程实现:不需要光盘,U盘等安装介质 优势: ( ...