之前接触到layer弹出层，今天又发现了一个非常实用的弹出层插件，它的名字叫做sweetalert.

官网地址：http://t4t5.github.io/sweetalert/

npm下载方式：npm install sweetalert

跟着教程写了几个demo，感觉效果还是不错的！

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<link rel="stylesheet" href="node_modules/sweetalert/dist/sweetalert.css">

	<!-- <link rel="stylesheet" href="sweetalert.css"> -->

	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

	<script src="node_modules/sweetalert/dist/sweetalert.min.js"></script>

	<!-- <script src="sweetalert.min.js"></script> -->

	<style>

	</style>

</head>

<body>

	<button id="btn01">点我弹出</button>

	<button id="btn02">点我弹出</button>

	<button id="btn03">点我弹出</button>

	<button id="btn04">点我弹出</button>

	<button id="btn05">点我弹出</button>

	<button id="btn06">点我弹出</button>

	<button id="btn07">点我弹出</button>

	<button id="btn08">点我弹出</button>

	<script>

     $("#btn01").click(function(){

     	 swal("这是一条消息！");

     });

     $("#btn02").click(function(){

     	 swal({

     	 	title:'你确定删除吗？',

     	 	text:'一旦删除，将无法恢复！',

     	 	type:'warning',

     	 	showCancelButton:true,

     	 	confirmButtonColor:'#DD6B55',

     	 	confirmButtonText:'确定删除！',

     	 	closeOnConfirm:false

     	 },

         function(){

         	swal("删除","您的文件已经删除","success");

         }

     	 );

     });

     $("#btn03").click(function(){

     	swal({

     		title:'你确定删除吗？',

     	 	text:'一旦删除，将无法恢复！',

     	 	type:'warning',

     	 	showCancelButton:true,

     	 	confirmButtonColor:'#DD6B55',

     	 	confirmButtonText:'确定删除！',

     	 	cancelButtonText:'取消操作！',

     	 	closeOnConfirm:false,

     	 	closeOnCancel:false

     	},

     	function(isConfirm){

     		if(isConfirm){

     			swal("删除！","您的文件已经被删除！",'success');

     		}else{

     			swal('取消！',"您的文件是依然存在！",'error');

     		}

     	}

     	)

     });

      $("#btn04").click(function(){

     	swal({

     		title:'Sweet!',

     		text:'送你一张图片',

     		imageUrl:'node_modules/sweetalert/example/images/thumbs-up.jpg'

     	});

     	 });

      $("#btn05").click(function(){

      	swal({

      		title:"<h1 style='font-size:16px'>此处可以插入html</h1>",

      		text:'我是<span style="color:#F8BB86">文字内容</span>',

      		html:true

      	})

      });

      $("#btn06").click(function(){

      	swal({

      		title:'自动关闭弹窗',

      		text:'设置弹窗在2秒后关闭',

      		timer:2000,

      		showConfirmButton:false

      	});

      });

      $("#btn07").click(function(){

      	swal({

      		title:'获取输入框中的内容',

      		text:'写入一些有趣的东西吧：',

      		type:'input',

      		showCancelButton:true,

      		closeOnConfirm:false,

      		confirmButtonText:'确定',

      		cancelButtonText:'取消',

      		animation:'slide-from-top',

      		inputPlaceholder:'请输入一些内容'

      	},

      	function(inputValue){

           if(inputValue==false) return false;

           if(inputValue==''){

           	swal.showInputError('你必须写入一些东西');

           	return false;

           }

           swal('非常好','您输入的内容是：'+inputValue,'success');

      	}

      	);

      });

      $("#btn08").click(function(){

      	swal({

      	title:'ajax请求例子',

        text:'提交ajax请求',

        type:'info',

        showCancelButton:true,

        closeOnConfirm:false,

        showLoaderOnConfirm:true

    },

    function(){

       	setTimeout(function(){

       		swal("ajax请求完成");

       	},2000);

       }

    );

      });

	</script>

</body>

</html>

　　

sweetalert弹窗的使用的更多相关文章

  1. (网页)sweetalert api 中文开发文档和手册,项目放弃alert

    弹框json的特别好使. sweetalert 示例 基本信息弹窗swal("这是一条信息!") 标题与文本的信息弹窗swal("这是一条信息!", " ...

  2. 点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  3. Mvc 异常处理 ajax的 和 不是ajax的！

    using ImageUpload.Auth; using System; using System.Collections.Generic; using System.Linq; using Sys ...

  4. Django 08

    目录 sweetalert弹窗 bulk-create 自定义分页器 sweetalert弹窗 下载sweetalert并存放在Django项目中的静态文件夹中 https://github.com/ ...

  5. BootstrapBlazor 组件库介绍

    项目介绍 演示系统地址:https://www.blazor.zone Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富 ...

  6. 漂亮的弹窗口插件——sweetAlert的使用

    想必你已经受够了单调的alert弹窗吧? 为了更好的用户体验性,现在介绍一款漂亮的弹窗口插件——sweetAlert,现在就来介绍它的使用 1.首先在官网下载它的CSS和JavaScript文件:ht ...

  7. Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07

    目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Aj ...

  8. Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据

    前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求 前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...

  9. sweetalert api中文开发文档和手册

    官网和下载地址: http://t4t5.github.io/sweetalert/  2016年10月30日14:10:21 废话,目前php开发越来越API话,所以php方法很多都是json返回数 ...

随机推荐

  1. [Linux]Redhat7配置本地镜像源

    一.Redhat7源 上一个文章介绍了如何配置的Redhat7的YUM网络源:[Linux]Redhat7配置CentOS7 YUM源 .如果在无法联网的情况下,可以使用镜像文件作为源安装需要的包. ...

  2. python魔术方法（__init__,__call__,被双下划线包围的方法）

    转载link:http://pycoders-weekly-chinese.readthedocs.io/en/latest/issue6/a-guide-to-pythons-magic-metho ...

  3. SpringCloud系列------Eureka-Server

    一.概述: Spring Cloud针对服务注册与发现,进行了一层抽象,并提供了三种实现:Eureka , Consul , Zookeeper 本篇文章只对Eureka 进行介绍: (部分内容引用  ...

  4. ipone 5s上，字体rem遇到的问题

    webapp中,12px的字体,利用rem实现自适应布局, 发现只有在ipone 5s中字体超大, 这两个class元素中字体一样大小,发现上面元素字体在ipone 5s中很大, 后来验证问题在哪里, ...

  5. SQL注入之Sqli-labs系列第三十关（基于WAF防护的双引号报错注入）和三十一关

    开始挑战第三十关和三十一关(Protection with WAF) 0x1 前言 这关其实和29关是同样的,login.php页面存在防护,只要检测到存在问题就跳转到hacked.php页面,不同的 ...

  6. Gram格拉姆矩阵在风格迁移中的应用

    Gram定义 n维欧式空间中任意k个向量之间两两的内积所组成的矩阵,称为这k个向量的格拉姆矩阵(Gram matrix) 根据定义可以看到,每个Gram矩阵背后都有一组向量,Gram矩阵就是由这一组向 ...

  7. 什么是node

    node 编辑 锁定讨论999 本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧!   node(结点):网络连接的端点,或两条(或多条)线路的连接点.结点可以是处理器.控制器或 ...

  8. python学习之路08——元组、集合

    一. 元组 1.概念 列表:是一种有序的集合 元组和列表的区别: ​ a.列表:[] 元组:() ​ b.列表中的元素可以进行增加和删除操作,但是,元组中的元素不能进行修改 ​ c.相同点:都是一种容 ...

  9. python学习之路03

    一.常量和变量 1.python中的数据类型 分类: ​ Number:数字型[整型,浮点型,复数] ​ String:字符串型 ​ Boolean:布尔型[True,False] ​ None:空值 ...

  10. mysql命令行使用

    连接数据库   mysql -P 端口号 -h 远程机地址/ip -u 用户名 -p mysql -uroot -p123456 修改数据库密码 mysqladmin -uroot -p123456 ...