之前接触到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. coursera-斯坦福-机器学习-吴恩达-笔记week3

    1 逻辑回归 1. classification 分类 eg:垃圾邮件分类.交易是否是欺诈.肿瘤类别.分类的结果是离散值. 2. sigmoid函数 使用线性方法来判断分类问题,会出现上图中的问题,需 ...

  2. java变量的作用域和基本数据类型转换

    1.变量的作用域 赋值运算符 变量名 = 表达式 列: a = (b+3)+(b-1) 表达式就是符号(如:加号,减号)与操作数(如:b,3)的组合 自动类型转换(隐式类型转换):从小类型到大类型可以 ...

  3. Linux内核分析--理解进程调度时机、跟踪分析进程调度和进程切换的过程

    ID:fuchen1994 姓名:江军 作业要求: 理解Linux系统中进程调度的时机,可以在内核代码中搜索schedule()函数,看都是哪里调用了schedule(),判断我们课程内容中的总结是否 ...

  4. ServiceStack.Redis遇到的问题:ServiceStack.Redis.Generic.RedisTypedClient`1”的方法“get_Db”没有实现。

    问题: ServiceStack.Redis.Generic.RedisTypedClient`1”的方法“get_Db”没有实现. 解决方案: step 1::引用的三个 包版本保持一致 Servi ...

  5. Spring 源码学习(1)—— 容器的基本实现

    最近在读Spring的源码,参考的是郝佳的<Spring源码深度解析>,这里把一些学习心得分享一下,总结的地方可能还有一些不完善,希望大家指教 IoC(控制反转)是Spring的特性之一, ...

  6. webapp js与安卓,ios怎么交互

    ) } } export default { callhandler (name, data, callback) { setupWebViewJavascriptBridge(function (b ...

  7. Linux 查看端口被什么程序占用

    lsof -i:8899 输出: COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAMEjava 38889 root 329u IPv6 5883661 ...

  8. CentOS磁盘满了,导致磁盘无法写入,这么清理

    输入命令 du -sh /* | sort -nr 会列出根目录文件夹的大小 看到哪个文件夹比较大 删除相应的缓存,重启服务器即可

  9. 选择器(ID选择器)

    ID选择器: 为HTML标签添加ID属性: <p id="p1">内容1</p> <p id="p2">内容2</p& ...

  10. Java 11 Tutorial

    Java 11 Tutorial 参考 https://blog.csdn.net/sihai12345/article/details/82889827 原文 https://winterbe.co ...