js插件---弹出层sweetalert2_swal.fire-程序员宅基地

技术标签: html5  js  

一、总结


sweetalert2的窗口美观,移动端适配也比较好,易学易用,是一款简单便捷的组件,值得学习!

SweetAlert2和SweetAlert的区别?

SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种情景模式的模态对话框。

SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类,功能非常强大。

二、SweetAlert2的使用教程(转)


转自:SweetAlert 2 全网最详细的使用方法
https://blog.csdn.net/dibr63585/article/details/102042483

官网地址:SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
https://sweetalert2.github.io/

使用方法:

使用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");

swal(...)会返回一个Promise对象,该Promise对象中then方法中的isConfirm参数的含义如下:

  • true:代表Confirm(确认)按钮。
  • false:代表Cancel(取消)按钮。
  • undefined:代表按下Esc键,点击取消按钮或在对话框之外点击。

配置参数:

参数 默认值 描述
title null 模态对话框的标题。它可以在参数对象的title参数中设置,也可以在swal()方法的第一个参数设置。
text null 模态对话框的内容。它可以在参数对象的text参数中设置,也可以在swal()方法的第二个参数设置。
html null 对话框中的内容作为HTML标签。如果同时提供texthtml参数,插件将会优先使用text参数。
type null 对话框的情景类型。有5种内置的情景类型:warningerrorsuccessinfoquestion。它可以在参数对象的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的值是selectradio,你可以为它们提供选项。对象的key代表选项的值,value代表选项的文本值。
inputAutoTrim true 是否自动清除返回字符串前后两端的空白。
inputValidator null 是否对input域进行校验,返回Promise对象。
inputClass null 自定义input域的class类。
参数 默认值 描述

可以使用swal.setDefaults(customParams)方法来覆盖默认的参数,customParams是一个对象。

方法:

方法 描述
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域。

三、弹出层sweetalert2的示例

转自:SweetAlert 2 全网最详细的使用方法
https://blog.csdn.net/dibr63585/article/details/102042483

把 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的效果图

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gzh_7/article/details/116743503

智能推荐

Matlab R2014a使用 mcc编译出错的问题_2014a mcc license-程序员宅基地

文章浏览阅读8.7k次,点赞5次,收藏4次。Matlab R2014a使用mcc编译lib文件时出错,Error: Could not check out a Compiler license: SIGN= keyword required but missing from the license certificate. This is probably because the license is older than _2014a mcc license

Q115:Linux系统下CodeBlocks对PBRT-V3进行编译和调试_添加 pbrt vs-程序员宅基地

文章浏览阅读1.1k次。我也是醉了,在各种环境下对PBRT-V3进行了编译和调试。 参考:Q113:PBRT-V3分别在Linux和Mac下的编译与调试(汇总)不过,小编对CodeBlocks“情有独钟”,所以,必须在CodeBlocks下完成这个事情。(注意是Linux系统)一、用cmake生成CodeBlocks的工程文件二、编译三、调试_添加 pbrt vs

Ubuntu下Qt不能输入中文_qt里怎么弄不出拼音-程序员宅基地

文章浏览阅读3.4k次。碰到很多人问Linux版本的Qt怎么不能输入中文。今天解答一下,在我们的ubuntu系统一般大家都是安装的搜狗输入法。而搜狗输入法只能在浏览器或者其他地方能输入中文。在Qtcreator中无法输入中文。解决的方法就是安装其他输入法。以下是具体操作首先看是否已添加中文输入,点你的设置图标进入设置菜单中的语言支持进入语言支持看你的是否已经有汉语(中国),没有则选择下面的添加或删除语言选项,添加汉语简体。然后点击应用到整个系统。接下来Ctrl+Alt+T 调出 Terminal.._qt里怎么弄不出拼音

x264中重要结构体说明_param->rc.f_vbv_buffer_init-程序员宅基地

文章浏览阅读587次。首先解释一下cli_opt_t的这个_t代表结构体可能是type的意思。同时还有很多i_ b_等作为前缀的变量,其中的i_表示int类型的变量,b_表示bool类型的。依次类推。正式进入主题。(A)typedef struct { int b_progress; int i_seek; hnd_t hin; hnd_t hout; FILE_param->rc.f_vbv_buffer_init

Caused by: java.util.ConcurrentModificationException并发修改异常_error querying database. cause: java.util.concurre-程序员宅基地

文章浏览阅读2.3k次。org.apache.ibatis.exceptions.PersistenceException:### Error querying database. Cause: java.util.ConcurrentModificationException### The error may exist in com/mybatis/mapper/UserMapper.xml### The ..._error querying database. cause: java.util.concurrentmodificationexception

解决树莓派鼠标延迟/迟滞问题-转CSDN博主“Deiki”-sunziren-程序员宅基地

文章浏览阅读450次。本文转自CSDN:https://blog.csdn.net/deiki/article/details/73252942,因为我在为树莓派安装2.4G无线键鼠的时候,鼠标反应很慢,卡顿严重(换成有线鼠标就好了,而且这个无线鼠标在win10上面是正常的),最终按着这位兄弟的办法,解决了,为了记住这个解决方法,特此转到我的博客。  之前在树莓派上试了几款鼠标..._树莓派2.4g鼠标速度如何调节

随便推点

android .向sdcard写入json字符串、读取json字符保存到list<类>中供调用_android12 sdcard文件中的字符串-程序员宅基地

文章浏览阅读7.3k次。第一. 要向android项目libs文件夹里添加gson-2.2.2.jar文件。 Txt文件中的json字符串:[{"ID":1,"LineColor":-16776961,"FillColor":-16776961,"LineSpan":10,"LineWidth":1,"Display":true,"Selected":true}, {"ID":2,"LineColor_android12 sdcard文件中的字符串

Unity一键打包APP_一键打包app工具-程序员宅基地

文章浏览阅读629次。唉 ,好久没有写博客了,今天弄一个简单的工具类脚本吧,在我们开发中经常会出现频繁打包测试的功能,对于不懂Unity的一些测试和策划人员来说,他们不会啊,老是麻烦程序也不太好对吧,干脆直接来个工具吧,傻瓜式打包APP吧!哈哈哈~直接上代码~/**************************************************** 文件:BuildApp.cs 作者:LYZY..._一键打包app工具

什么是二叉平衡树,如何插入节点,删除节点,说出关键步骤。_什么是二叉平衡树,如何插入节点,删除节点,说出关键步骤。-程序员宅基地

文章浏览阅读296次。什么是二叉平衡树,如何插入节点,删除节点,说出关键步骤。_什么是二叉平衡树,如何插入节点,删除节点,说出关键步骤。

超文本标记语言是指Java_超文本标记语言(HTML)-程序员宅基地

文章浏览阅读1.9k次。超文本标记语言(HyperText MarkUp Language,HTML)HTML是用来制作网页的标记语言,HTML不需要编译,直接由浏览器解析;HTML文件是一个文本文件,包含了一些HTML元素, 标签等;HTML文件必须使用html或htm为文件名后缀;HTML是大小写不敏感的,HTML与html是一样的。HTML超文本标记语言,通过使用标记来描述文档结构和表现形式的一种语言,由浏览器进行..._java超文本标记语言转义

qmake qt工程用vs打开时出现 LNK1104: 无法打开文件“uiAccess=‘false‘ /MANIFESTDEPENDENCY:ty_无法打开文件“uiaccess='false-程序员宅基地

文章浏览阅读975次。说明LNK1104: 无法打开文件“uiAccess='false' /MANIFESTDEPENDENCY:ty 对于此类型问题现实可能各种原因导致,我目前提供的并不能解决每一位所产生的问题,勿怪。平台:vs2015 - qt5.7.1将通过 qmake -tp vc xxx.pro 产生xxx.vcxproj 通过vs2019打开 并选择对应的工具集编译时,出现LNK1104: 无法打开文件“uiAccess=‘false’ /MANIFESTDEPENDENCY:ty解决方案打开_无法打开文件“uiaccess='false

SODBASE CEP学习(十一):分布式集群_哪个分布式计算框架支持cep操作-程序员宅基地

文章浏览阅读869次。大家装SODBASE CEP Server的时候会发现,它本身就是一个分布式系统,可以非常方便的快速建立分布式运算模型。1. 启用集群方法只要修改sodbase-cep-server-webservice-1.0.1/configuration/configuration/db.properties即可。所有的计算服务器共享了一个状态服务器State Server,也就是db.proper_哪个分布式计算框架支持cep操作

推荐文章

热门文章

相关标签