之前接触到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. zabbix3.4.7常用监控项

    Zabbix中内置了很多监控参数(Key_),可以获取监控对象中的系统.CPU.网络.内存.文件系统等信息.下面就详细介绍一下这些监控参数的意义. 1. 测试获取监控参数内容的方法 在Zabbix S ...

  2. 在Linux终端安装Julia

    官方参考文档:https://julialang.org/downloads/platform.html#generic-binaries 一.centos终端安装 打开Linux终端输入 sudo ...

  3. 二十二. Python基础(22)--继承

    二十二. Python基础(22)--继承 ● 知识框架   ● 继承关系中self的指向 当一个对象调用一个方法时,这个方法的self形参会指向这个对象 class A:     def get(s ...

  4. JavaScript的使用你知道几种？(上)

    往期回顾 在上一期的<JavaScript的组成 | DOM/BOM>☜里,我们有对文档对象模型-DOM.浏览器对象模型-BOM 这两大部分进行了解学习,如果有还不是很明白的小伙伴们,可以 ...

  5. django rest_framework 分页出现报错

    1.出现: WARNINGS: ?: (rest_framework.W001) You have specified a default PAGE_SIZE pagination rest_fram ...

  6. VirtualBox安装CENTOS7.3常见问题

    1 DHCP 问题无法上网解决 :sudo dhclient 2 安装宝塔面板:yum install -y wget && wget -O install.sh http://dow ...

  7. 12--Python入门--文件读写--TXT文件

    在进行数据分析之前,可能需要读写自己的数据文件.或者在完成数据分析之后,想把结果输出到外部的文件在Python中,利用pandas模块中的几个函数,可以轻松实现这些功能,利用pandas读取文件之后数 ...

  8. 自动化测试-7.selenium定位一组对象

    前言 前面的几篇都是讲如何定位一个元素,有时候一个页面上有多个对象需要操作,如果一个个去定位的话,比较繁琐,这时候就可以定位一组对象. webdriver 提供了定位一组元素的方法,跟前面八种定位方式 ...

  9. ES6 用Promise对象实现的 Ajax 操作

    下面是一个用Promise对象实现的 Ajax 操作的例子. const getJSON = function(url) { const promise = new Promise(function( ...

  10. single-cell RNA-seq 工具大全

    [怪毛匠子-整理] awesome-single-cell List of software packages (and the people developing these methods) fo ...