js插件---弹出层sweetalert2(总结)
js插件---弹出层sweetalert2(总结)
一、总结
一句话总结:
sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点
1、SweetAlert2和SweetAlert的区别?
SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种情景模式的模态对话框。
二、弹出层sweetalert2
官网地址:SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
https://sweetalert2.github.io/#examples
1、效果图
三、SweetAlert 2 全网最详细的使用方法(转)
转自:SweetAlert 2 全网最详细的使用方法
https://blog.csdn.net/dibr63585/article/details/102042483
官网链接
准备阶段
CDN js
如果该 链接 时间久远了 , 可以在官网去找找最新的
可以把 js 复制出来 自己新建一个文件 然后 引用到 html 中
1. 带有 确定和取消的 弹框
Swal.fire({
type: 'warning', // 弹框类型
title: '注销帐号', //标题
text: "注销后将无法恢复,请谨慎操作!", //显示内容
confirmButtonColor: '#3085d6',// 确定按钮的 颜色
confirmButtonText: '确定',// 确定按钮的 文字
showCancelButton: true, // 是否显示取消按钮
cancelButtonColor: '#d33', // 取消按钮的 颜色
cancelButtonText: "取消", // 取消按钮的 文字
focusCancel: true, // 是否聚焦 取消按钮
reverseButtons: true // 是否 反转 两个按钮的位置 默认是 左边 确定 右边 取消
}).then((isConfirm) => {
try {
//判断 是否 点击的 确定按钮
if (isConfirm.value) {
Swal.fire("成功", "点击了确定", "success");
}
else {
Swal.fire("取消", "点击了取消", "error");
}
} catch (e) {
alert(e);
}
});
2.带有 展示 标签内容 的弹框
var content = "无记录";
var msg=""; //msg 是从外面传入的数据
if (msg) {
content = "<p style='color: red'>最近一次操作后的5小时内有效</p> "
+ "<p>可以使用 Ctrl +F 查找关键字</p>"
+ "<table class='table_list'>"
+ "<tr>"
+ " <th class='js_tr_data'> 时间</th> <th>名称</th> <th>密码</th>"
+ "</tr>"
+ msg
+ "</table>"
}
Swal.fire({
title: '<strong>记录</strong>',
type: 'info',
html: content, // HTML
focusConfirm: true, //聚焦到确定按钮
showCloseButton: true,//右上角关闭
})
3.带有定位 和 消失时间的 弹框
Swal.fire({
position: 'top-end', //定位 左上角
type: 'success',
title: 'Your work has been saved',
showConfirmButton: false,
timer: 1500
})
4. 自定义 第三方 css 的 弹框 (推荐使用 Animate.css )
Swal.fire({
title: 'Custom animation with Animate.css',
animation: false,
customClass: 'animated tada'
})
5. 右上角 通知类 弹窗
Swal.fire({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
type: 'success',
title: 'Signed in successfully'
})
6. 如何 做 一个自己的 通用模版
//定义模版 (可多次使用)
var MyBox = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
//调用
MyBox.fire({
type: 'success',
title: 'successfully'
});
四、sweetalert2使用教程(转)
转自:sweetalert2使用教程
https://www.cnblogs.com/ammyblog/p/11951225.html
背景:
项目的开发中经常会遇到弹窗的问题,但是我们用到的弹窗都特别low,而且网上找了一下,发现easy-ui以及layer对应的弹窗都不是我想要的,后来发现sweetalert,发现评论还不错,所以个人尝试一下,并记录一下使用过程,便于他人借鉴。
SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类,功能非常强大。
SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种情景模式的模态对话框。
使用方法:
使用sweetalert对话框需要引入对应的js和css(如 sweetalert2.min.css 和 sweetalert2.min.js),因为里面的promise属性不支持ie11,所以也需要引入promise.min.js文件,而且改js必须依托jQuery,所以需要引入jquery.min.js。如下图:
<link rel="stylesheet" href="sweetalert/sweetalert2.min.css" />
<script type="text/javascript" src="jquery3.1.0/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="sweetalert/es6-promise.auto.js"></script>
<script type="text/javascript" src="sweetalert/sweetalert2.min.js"></script>
但是在网上下载的时候发现要不就是需要csdn积分,要不下载的就不能用,所以此处提供一个下载的链接:
https://www.bootcdn.cn/limonte-sweetalert2/
首先创建2个文件,一个是css文件,一个js文件,然后打开这个网站之后,找到自己想要版本的css和js,然后打开对应的链接,复制里面内容分别粘贴到自己创建的文件中即可使用,以测试。
基本用法:
最基本的使用方法是通过swal()
来弹出一个对话框。
swal("Hello world!");
如果要弹出一个带情景模式的对话框,可以在的第二个参数中设置。
swal("Good job!", "You clicked the button!", "success");
配置参数:
参数 | 默认值 | 描述 |
title | null | 模态对话框的标题。它可以在参数对象的title 参数中设置,也可以在swal() 方法的第一个参数设置。 |
text | null | 模态对话框的内容。它可以在参数对象的text 参数中设置,也可以在swal() 方法的第二个参数设置。 |
html | null | 对话框中的内容作为HTML标签。如果同时提供text 和html 参数,插件将会优先使用text 参数。 |
type | null | 对话框的情景类型。有5种内置的情景类型:warning ,error ,success ,info 和question 。它可以在参数对象的type 参数中设置,也可以在swal() 方法的第三个参数设置。 |
customClass | null | 模态对话框的自定义class类。 |
animation | true | 如果设置为false,对话框将不会有动画效果。 |
allowOutsideClick | true | 是否允许点击对话框外部来关闭对话框。 |
allowEscapeKey | true | 是否允许按下Esc键来关闭对话框。 |
showConfirmButton | true | 是否显示“Confirm(确认)”按钮。 |
showCancelButton | false | 是否显示“Cancel(取消)”按钮。 |
confirmButtonText | "OK" | 确认按钮上的文本。 |
cancelButtonText | "Cancel" | 取消按钮上的文本。 |
confirmButtonColor | "#3085d6" | 确认按钮的颜色。必须是HEX颜色值。 |
cancelButtonColor | "#aaa" | 取消按钮的颜色。必须是HEX颜色值。 |
confirmButtonClass | null | 确认按钮的自定义class类。 |
cancelButtonClass | null | 取消按钮的自定义class类。 |
buttonsStyling | true | 为按钮添加默认的swal2样式。如果你想使用自己的按钮样式,可以将该参数设置为false。 |
reverseButtons | false | 如果你想反向显示按钮的位置,设置该参数为true。 |
showLoaderOnConfirm | false | 设置为true时,按钮被禁用,并显示一个在加载的进度条。该参数用于AJAX请求的情况。 |
preConfirm | null | 在确认之前执行的函数,返回一个Promise对象。 |
imageUrl | null | 为模态对话框自定义图片。指向一幅图片的URL地址。 |
imageWidth | null | 如果设置了imageUrl 参数,可以为图片设置显示的宽度,单位像素。 |
imageHeight | null | 如果设置了imageUrl 参数,可以为图片设置显示的高度,单位像素。 |
imageClass | null | 自定义的图片class类。 |
timer | null | 自动关闭对话框的定时器,单位毫秒。 |
width | 500 | 模态窗口的宽度,包括padding值(box-sizing: border-box )。 |
padding | 20 | 模态窗口的padding内边距。 |
background | "#fff" | 模态窗口的背景颜色。 |
input | null | 表单input域的类型,可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。 |
inputPlaceholder | "" | input域的占位符。 |
inputValue | "" | input域的初始值。 |
inputOptions | {} 或 Promise | 如果input 的值是select 或radio ,你可以为它们提供选项。对象的key代表选项的值,value代表选项的文本值。 |
inputAutoTrim | true | 是否自动清除返回字符串前后两端的空白。 |
inputValidator | null | 是否对input域进行校验,返回Promise对象。 |
inputClass | null | 自定义input域的class类。 |
参数 | 默认值 | 描述 |
方法:
方法 | 描述 |
swal.setDefaults({Object}) | 当你在使用SweetAlert2时有大量的自定义参数,可以通过swal.setDefaults({Object}) 方法来将它们设置为默认参数。 |
swal.resetDefaults() | 重置设置的默认值。 |
swal.queue([Array]) | 提供一个数组形式的SweetAlert2参数,用于显示多个对话框。对话框将会一个接一个的出现。 |
swal.close() 或 swal.closeModal() |
以编程的方式关闭当前打开的SweetAlert2对话框。 |
swal.enableButtons() | 确认和关闭按钮可用。 |
swal.disableButtons() | 禁用确认和关闭按钮。 |
swal.enableLoading() 或 swal.showLoading() |
禁用按钮并显示加载进度条。通常用于AJAX请求。 |
swal.disableLoading() 或 swal.hideLoading() |
隐藏进度条并使按钮可用。 |
swal.clickConfirm() | 以编程的方式点击确认按钮。 |
swal.clickCancel() | 以编程的方式点击取消按钮。 |
swal.showValidationError(error) | 显示表单校验错误信息。 |
swal.resetValidationError() | 隐藏表单校验错误信息。 |
swal.enableInput() | 使input域可用。 |
swal.disableInput() | 禁用input域。 |
方法 | 描述 |
js插件---弹出层sweetalert2(总结)的更多相关文章
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- js 实现弹出层效果
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- (三)原生JS实现 - 插件 - 弹出层
创建遮罩层 _createCover: function() { var newMask = document.createElement("div"); newMask.id = ...
- JS简易弹出层
目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹 ...
- JS实现弹出层对话框
点击按钮后,弹出层对话框,可交互,点击关闭后才关闭掉对话框. 效果图: 源码: <!doctype html> <html> <head> <meta cha ...
- JS实现弹出层效果
很多时候我们想去某某网站干点什么的时候,就会让我们先注册登录后才可以访问内容,而现在很多网站注册登录的时候都会有一种遮罩层的效果,就是背景是带有透明度的黑色遮罩,盖满整个网站,然后登录框弹出固定在屏幕 ...
- 很实用的baguetteBox.js 图片弹出层
lightbox JS插件--baguetteBox.js,它是用纯Javascript创建的图像展示效果,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. baguetteB ...
- 【jq】插件—弹出层layer.js
layer.js包含了所有的层级情形,并且附加的有:tab层,相册层.webIM层. 适用于移动版本的layer.js 为layer for mobile 配套的layui 非常适合用于后台系统的 ...
- 阻止picker.js插件弹出键盘
<input id="focus" type="text" value="" placeholder="手机号" ...
随机推荐
- xcode 4 制作通用静态库
参考:http://blog.csdn.net/pjk1129/article/details/7255163 最近在做Apple的IOS开发,有开发静态库的需求,本身IOS的开发,只允许静态库或者F ...
- Keil、uVision、RealView、MDK、Keil C51之间的区别比较
我们要区别的概念:KEIL UVision,KEIL MDK,KEIL For ARM,RealView MDK,KEIL C51,KEIL C166,KEIL C251 从接触MCS-51单片机开始 ...
- Java实现数据批量导入mysql数据库
本文完全照搬别人的. 原文标题:Java实现数据批量导入数据库(优化速度-2种方法) 原文地址:https://blog.csdn.net/qy20115549/article/details/526 ...
- java写入内容到本地文件 -读取文件内容
/** 日志记录 * @author sys * @param content 要写入的类容 * @param path 目标路径 c:/log/ * @param filename 文件名 log. ...
- 关于JDBCUtils的模糊查询问题
1.JDBCUtils的模糊查询问题解决方法 数据库jdbc工具类的模糊查询最核心的就是用like %内容%,但是我们对于界面输入进来的东西都是用?来替代的,那么就代表着我们不能吧%%写在问号旁边.否 ...
- [Wc2011] Xor 和 [HNOI2011]XOR和路径
Xor F.A.Qs Home Discuss ProblemSet Status Ranklist Contest 入门OJ ModifyUser autoint Logout 捐赠本站 Prob ...
- PHP高手干货分享:不能不看的50个细节!
1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的”函数”(译注:PHP手 ...
- 使用safe-rm替换rm命令,防止误删除
1.下载safe源码包: wget https://launchpad.net/safe-rm/trunk/0.12/+download/safe-rm-0.12.tar.gz 2.解压safe-rm ...
- hello world 程序的生成过程
一个c / c ++文件需要经过预先(预处理),编译(编译),编译(汇编)和链接(链接)等四步,才能生成可执行程序. 在日常编译中,通常“编译”统称这四步: gcc -c xxx .s:汇编 gcc ...
- Restful API 指南
作为软件开发人员,我们大多数人在日常生活中使用或构建 REST api.API 是系统之间的默认通信方式.亚马逊是如何有效地使用 api 进行通信的最佳例子. 在这篇文章中,我将讨论如何更好地设计 R ...