之前接触到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. Android 音视频深入 十五 FFmpeg 推流mp4文件（附源码下载）

    源码地址https://github.com/979451341/Rtmp 1.配置RTMP服务器 这个我不多说贴两个博客分别是在mac和windows环境上的,大家跟着弄 MAC搭建RTMP服务器h ...

  2. PHP socket服务端与客户端的简易通信

    今天学习socket通信的同时,顺便整理了下以前初识socket的知识. 现在关于php的socket通信,有些框架已经十分成熟了,比如  swoole 和 workerman,这两个大家可以学习学习 ...

  3. springCloud配置本地配中心SpringCloudConfig

    多环境配置 在一般开发过程中如果调试都在本地进行,则可以设置一个多环境配置,在本地与线上配置间来回切换. springcloud默认会访问的配置文件名是application.properties, ...

  4. 【转载】GET和POST两种基本请求方法的区别

    原文地址:http://www.cnblogs.com/logsharing/p/8448446.html GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一 ...

  5. 指导手册05：MapReduce编程入门

    指导手册05:MapReduce编程入门   Part 1:使用Eclipse创建MapReduce工程 操作系统: Centos 6.8, hadoop 2.6.4 情景描述: 因为Hadoop本身 ...

  6. OC学习笔记

    备注:这里只是个人的观点,有的地方也是copy,多多指教,个人笔记,有侵犯你们版权的地方还望海涵!!! ARC单例模式的实现 使用alloc方法初始化一个类的实例的时候,默认是调用了 allocWit ...

  7. nginx 504 Gateway Time-out

    #设定http服务器 http { include mime.types; #文件扩展名与文件类型映射表 default_type application/octet-stream; #默认文件类型 ...

  8. jQuery-2.DOM---节点插入

    DOM内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来.那么问题来了,怎么放到文档上? 这里就涉及到一个位置关系,常见 ...

  9. 【软件安装与环境配置】TX2刷机过程

    前言 使用TX2板子之前需要进行刷机,一般都是按照官网教程的步骤刷机,无奈买不起的宝宝只有TX2核心板,其他外设自己搭建,所以只能重新制作镜像,使用该镜像进行刷机. 系统需求 1.Host Platf ...

  10. 如何用Caffe训练自己的网络-探索与试验

    现在一直都是用Caffe在跑别人写好的网络,如何运行自定义的网络和图片,是接下来要学习的一点. 1. 使用Caffe中自带的网络模型来运行自己的数据集 参考 [1] :http://www.cnblo ...