前端基础(九)：SweetAlert(弹出框)
简介
SweetAlert是一款很好用的弹出框框架
下载
导入
博主用的是bootstrap-sweetalert,所以要依赖bootstrap，导入前先导入原生jQuery以及bootstrap
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
基本样式
1、单条弹出框
swal("这是一条消息！");
2、删除警告框（取消时不提示）
swal({
title:'你确定删除吗？',
text:'一旦删除，将无法恢复！',
type:'warning',
showCancelButton:true,
confirmButtonColor:'#DD6B55',
confirmButtonText:'确定删除！',
closeOnConfirm:false
},
function(){
swal("删除","您的文件已经删除","success");
}
);
3、删除警告框（取消时提示）
swal({
title:'你确定删除吗？',
text:'一旦删除，将无法恢复！',
type:'warning',
showCancelButton:true,
confirmButtonColor:'#DD6B55',
confirmButtonText:'确定删除！',
cancelButtonText:'取消操作！',
closeOnConfirm:false,
closeOnCancel:false
},
function(isConfirm){
if(isConfirm){
swal("删除！","您的文件已经被删除！",'success');
}else{
swal('取消！',"您的文件是依然存在！",'error');
}
}
)
4、带图片的弹出框
swal({
title:'Sweet!',
text:'送你一张图片',
imageUrl:'static/img/headpic/logo.png
' }); });
5、可插入html代码的弹出框
swal({
title:"<h1 style='font-size:16px'>此处可以插入html</h1>",
text:'我是<span style="color:#F8BB86">文字内容</span>',
html:true
})
6、自动关闭的弹出框
swal({
title:'自动关闭弹窗',
text:'设置弹窗在2秒后关闭',
timer:2000,
showConfirmButton:false
});
7、带输入框的弹出框
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');
}
);
8、可以提交AJAX请求的弹出框
swal({
title:'ajax请求例子',
text:'提交ajax请求',
type:'info',
showCancelButton:true,
closeOnConfirm:false,
showLoaderOnConfirm:true
},
function(){
setTimeout(function(){
swal("ajax请求完成");
},2000);
}
);
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/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>
我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan
前端基础(九)：SweetAlert(弹出框)的更多相关文章
- 自动化测试基础篇--Selenium弹出框alert
摘自https://www.cnblogs.com/sanzangTst/p/7685304.html 不是所有的弹出框都叫alert,在使用alert方法前,先要识别出到底是不是alert.先认 ...
- js基础 三种弹出框 数据类型
总结:js三个组成部分ES:语法DOM:对象模型 => 通过js代码与页面文档(出现在body中的所有可视化标签)进行交互BOM:对象模型 => 通过js代码与浏览器自带功能进行交互 引入 ...
- Selenium基础知识(七)弹出框处理
使用switch_to.alert方法来处理弹页面弹出的警告框 页面常见警告框种类:alert/confirm 确认框/prompt switch_to.alert().accept() switch ...
- SweetAlert弹出框
以前也用过,那个时候没有写过,突然看见了,就写上了. 网址:http://mishengqiang.com/sweetalert2/ swal({ title: '确定删除吗?', text: '你将 ...
- ajax结合sweetalert弹出框删除数据
思路:
- jsp + js + 前端弹出框
在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框 代码: var a = "Hello ...
- 弹出框三 之 sweetalert
1下载sweetalert 2.引入到项目中 <link href="~/Content/sweetalert.css" rel="stylesheet" ...
- Bootstrap入门（二十九）JS插件6：弹出框
Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...
- Python+Selenium笔记（九）：操作警告和弹出框
#之前发的 driver.switch_to_alert() 这句虽然可以运行通过,但是会弹出警告信息(这种写法3.x不建议使用) 改成 driver.switch_to.alert就不会了. (一 ...
随机推荐
- RocketMQ搭建-WEB集成RMQ-SE集成RMQ
坑一 https://blog.csdn.net/c_yang13/article/details/76836753 JAVAWEB集成RMQ https://www.cnblogs.com/yun9 ...
- JS_&&||
&& 且 当第一个参数为flase 就懒惰了,后面那个无视了,当第一个参数为ture,再去贪婪:|| 或 当第一个参数为flase 就贪婪了,继续找和面个了,当第一个参数为ture,就 ...
- useJDBC4ColumnNameAndLabelSemantics设置后无效，怎么办？
连接的是DB2数据库, 在查询语句中有SELECT COLUMNNAME AS ALIASNAME FROM TABLE这样的结构时, 会报如下错误: Caused by: com.ibm.db2.j ...
- 最新 携程java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.携程等10家互联网公司的校招Offer,因为某些自身原因最终选择了携程.6.7月主要是做系统复习.项目复盘.LeetCode ...
- Mybatis插件之Mybatis-Plus的实体类注解篇
主要注释到实体类上的注解: @TableName(value = …) 当数据库名与实体类名不一致或不符合驼峰命名时,需要在此注解指定表名 @TableId(type = …) 指定实体类的属性为对应 ...
- docker入门2--生命周期
容器的概念: 一句话概括容器:容器就是将软件打包成标准化单元,以用于开发.交付和部署. 容器镜像是轻量的.可执行的独立软件包 ,包含软件运行所需的所有内容:代码.运行时环境.系统工具.系统库和设置 ...
- 2017 ICPC西安区域赛 A - XOR （线段树并线性基）
链接:https://nanti.jisuanke.com/t/A1607 题面: Consider an array AA with n elements . Each of its eleme ...
- kafka producer 生产者客户端参数配置
在生产者向broker发送消息时,需要配置不同的参数来确保发送成功. acks = all #指定分区中有多少副本必须收到这条消息,生产者才认为这条消息发送成功 acks = 0 #生产者发送消息之后 ...
- celery异步任务
1.安装 pip install celery 2.创建celery_tasks文件夹,创建config配置文件和main文件 # 在config.py文件中配置中间人broker地址信息 - red ...
- 如何配置kindeditor的工具栏
kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏.针对不同的用户,不同的项目,不同的环境,可能就需要保留部分工具栏.那么我们应该如何 ...