之前接触到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. Java 猜字谜游戏

    package fundmental_excise6; import java.util.Arrays; import java.util.Scanner; /** * @author : jeasi ...

  2. vue-router进阶-3-过渡动效

    template: <transition> <router-view></router-view> </transition> 单个路由的过渡 con ...

  3. Linux设备驱动程序 第三版 读书笔记（一）

    Linux设备驱动程序 第三版 读书笔记(一) Bob Zhang 2017.08.25 编写基本的Hello World模块 #include <linux/init.h> #inclu ...

  4. node.js安装全攻略

    node.js学习也有近一年之久了,自开始以来,能遇到各种问题,就拿安装来说,总能遇到稀奇古怪的问题,但每次谷歌,或者百度,都能找到解决办法,逐渐也就养成了百度或者谷歌的毛病! 正常安装 第一步:下载 ...

  5. ubuntu 网络配置

    检查网络配置命令:ifconfig 一.通过配置文件配置 新手没怎么用过Ubuntu,所以走了不少弯路,网上找了很多方法,大都没对我起到帮助作用,所以把自己的配置方法写一写. Ubuntu上连了两块网 ...

  6. js--变量对象总结

    当 JavaScript 代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution context). 对于每个执行上下文,都有三个重要属性: 变量对象( ...

  7. Linux下初次使用github

    1.安装 1.1 使用yum安装的 命令:$ yum install git git-gui 1.2 生成密钥对,使用ssh-keygen方法 ssh-keygen -t [rsa|dsa],将会生成 ...

  8. oracle 如何查询/修改dmp文件的字符集

    1.如何查询dmp文件的字符集 用oracle的exp工具导出的dmp文件也包含了字符集信息,dmp文件的第2和第3个字节记录了dmp文件的字符集.如果dmp文件不大,比如只有几M或几十M,可以用Ul ...

  9. Git 简介及简单操作

    一.GIT是什么 Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本 ...

  10. leetcode 152. Maximum Product Subarry

    这道题求的是乘积的最大值的,那么依照之前的和的最大值类似的做法的,乘积的最大值可能是在最大值*当前值和最小值*当前值和当前值三者之间取得的最大值的,那么使用两个变量来保存每一步的最大最小值的. cla ...