之前接触到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. Daily record-September

    September11. I feel much more reassured when I've been for a health check. 体检之后我感到放心多了.2. The diseas ...

  2. elastic search 重要的系统配置

    文章翻译自 https://www.elastic.co/guide/en/elasticsearch/reference/current/file-descriptors.html 1.文件描述符 ...

  3. Forth 采用Create，Does>定义新的词（word）& 延迟词技术

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  4. list的相关函数

    # ### 列表相关的函数 # (1) append ''' 功能:向列表的末尾添加新的元素 格式:列表.append(值) 返回值:None 注意:新添加的值在列表的末尾,该函数直接操作原有列表 ' ...

  5. B-trees

    B-trees are balanced search trees designed to work well on disks or other direct accesssecondary sto ...

  6. js实现table表格相同内容按需合并

    uniteTdCells(tableId) { var table = document.getElementById(tableId); for (let i = 0; i < table.r ...

  7. C#读写三菱PLC和西门子PLC数据 使用TCP/IP 协议

    本文将使用一个Github开源的组件库技术来读写三菱PLC和西门子plc数据,使用的是基于以太网的TCP/IP实现,不需要额外的组件,读取操作只要放到后台线程就不会卡死线程,本组件支持超级方便的高性能 ...

  8. 设计一款相册APP，代替系统自带的相册功能，列举主要功能

    分析:先分析原生相册的不足,用户需求痛点,然后描述下界面设计,并说明为什么用户要使用你的产品.       iOS系统手机,自带的相机有基础的拍照,基础的美颜效果.除了本地存储,还有icloud可以存 ...

  9. 02bootstrap_通用标签样式和代码

    ---恢复内容开始--- 02bootstrap_通用标签样式和代码 1.标题:page-header 副标题样式 2.常用标签和样式 Bootstrap 将全局 font-size 设置为 14px ...

  10. springboot2.1.3.RELEASE+jsp笔记war部署tomcat

    springboot+jsp <packaging>war</packaging> <parent> <groupId>org.springframew ...