sweetalert
2019独角兽企业重金招聘Python工程师标准>>> 
sweetalert目前主要有sweetalert和sweetalert2两个版本。
用户可以去对应的网站下载不同的版本。将对应版本的js和css文件引入到HTML页面中。如：
<script src="sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert.css">后，方可使用。
SweetAlert2：A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
一.函数方式
例子：
eg01：弹出基本的提示，
swal('Hello world');
eg02：弹出错误提示，
swal('title', 'Something went wrong!', 'error');
swal()里面可以放三个参数，第一参数是弹窗标题，第二个参数是弹窗内容，第三个参数是弹窗的类型（弹窗类型不同，弹窗的图标不同）。这里 swal 中的第三个参数‘error’，指定了弹框的类型types，还可以改成‘success’/‘warning’／‘info’／‘question’，下图是不同types的弹窗的图标：
二.对象方式
eg3：处理弹出框的处理结果，swal({....}).then(function(){...},function(dismiss){...})。点击确认按钮过后，系统会默认执行第一个function（）。dismiss的意思是关掉对话框，关掉对话框执行第二个function（dismiss）。
swal({title: '你确定吗？',//标题text: '你将不可以恢复被删除的文件',//内容type: 'warning',//弹窗类型showCancelButton: true,//是否显示删除按钮，默认值是false（不显示），true（显示）confirmButtonText: '确认删除',//确认按钮上的字cancelButtonText: '取消',//取消按钮上面的字
}).then(function() {swal('删除成功!','你的文件被删除','success',)
}, function(dismiss) {// dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'if (dismiss === 'cancel') {swal('取消操作','你取消了该操作','error')}
})（插入gif动态图片）
处理关闭对话框事件：当一个弹窗被用户关闭时，关闭弹窗的方式会被dismiss记录，数据类型是string类型：
| string | 描述 | 相关的配置项 |
|---|---|---|
| 'overlay' | 用户点击overlay（弹窗之外的窗体部分） | allowOutsideClick |
| 'cancel' | 用户点击cancel按钮 | showCancelButton |
| 'close' | 用户点击close按钮 | showCloseButton |
| 'esc' | 用户按Esc键 | allowEscapeKey |
| 'timer' | 倒计时结束并且弹窗自动被关闭 | timer（计时器） |
如果未处理dismiss的事件，控制台将报错（弹窗正常弹出/关闭）。为了避免这种情况，通常会添加处理函数function（dismiss）{ }或者使用 .catch(swal.noop)做简单快速处理错误的方式。
sweetalert的配置项：
sweetalert2的相关配置项
| argument（参数） | 默认值 | 描述 |
| title | null | modal的title，可以使用HTML标签，它可以放在函数的第一个参数中也可以添加到对象中的“title” |
| ttileText | null | 纯文本的title |
| text | null | modal的描述。它可以放在函数的第二个参数中也可以添加到对象中的“text” |
| html | null | modal的HTML描述。如果同时提供了text和html参数，“text”将被使用 |
| type | null | modal的类型。Sweetalert2由五个内置类型 warning、info、success、error、question，各自有各自的动画效果。它可以放在函数的第三个参数中也可以添加到对象的“type” |
| target | ‘body’ | 用于添加modal框的容器元素 |
| input | null | 输入字段类型，分为text、email、password、number、tel、range、textarea、select、radio、checkbox、file和url |
| width | 500px | modal窗口宽度，包括内边距（box-sizing:border-box）。可以px或者%形式。 |
| padding | 20 | modal窗口的内边距 |
| background | #fff | modal框窗口的背景（css的背景属性） |
| customClass | null | modal框的custom CSS类 |
| timer | null | modal框的自动关闭计时器。表示的是毫秒 |
| animation | true | 动画效果。如果设置为false，modal框的CSS动画效果将失效。 |
| allowOutSideClick | true | 点击模态框以外的地方是否关闭模态框。true（默认）关闭、false不关闭 |
| allowEscapeKey | true | 按Esc键是否关闭模态框。true（默认）关闭、false不关闭 |
| allowEnterKey | true |
默认为true，按空格键或者回车键表示确认，当设为false时，只能按“确认按钮“来确认。 |
| showConfirmButton | true | 设置为false时，“confirm”按钮不会被显示。当使用html参数时可能会有用的。 |
| showCancelButton | false | 设置为true时，“cancel”按钮将被显示，用户可以点击该按钮关闭模态框 |
| confirmButtonText | “OK” | 用来改变confirm按钮的文字 |
| cancelButtonText | “cancel” | 用来改变cancel按钮上的文字 |
| confirmButtonColor | “#3085d6” | 确认按钮的背景色（必须是十六进制） |
| cancelButtonColor | “#aaa” | 删除按钮的背景色（必须是十六进制） |
| confirmButtonClass | null | A custom CSS class for the "Confirm"-button. |
| canceButtonClass | null | A custom CSS class for the "Cancel"-button. |
| confirmButtonAriaLabel | ' ' | Use this to change the aria-label for the "Confirm"-button. |
| canceButtonAriaLabel | ' ' | Use this to change the aria-label for the "Cancel"-button. |
| buttonsStyling | true | 将默认样式应用于按钮，如果你想用自己的样式类（如 Bootstrap样式类），将该参数值设为false |
| reverseButtons | false | 如果要反转默认按钮位置（“确认” 按钮在右侧），请设置为true |
| focusConfirm | true | 如果要按标签顺序对第一个元素进行聚焦，而不是默认情况下将“确认”按钮设置为false。 |
| focusCancel | false | 如果要在默认情况下对“取消”按钮进行聚焦，请设置为true。 |
| showCloseButton | false | 如果想在右上角显示close按钮，设置成true |
| closeButtonArialLabel | "Close this dialog" | Use this to change the aria-label for the close button. |
| showLoaderOnConfirm | false | 设置为true可禁用按钮，并显示正在加载的内容。 将其与preConfirm参数结合使用。 |
| preConfirm | null | 确认之前执行的功能，应返回Promise，请参阅使用示例。 |
| imageUrl | null | 为模态框添加图像。 应该包含一个带有图像路径或URL的字符串。 |
| imageWidth | null | 如果设置了imageUrl，您可以指定imageWidth，单位px |
| imageHeight | null | |
| imageAlt | ‘ ’ | 自定义图片的代替字（图片不显示时显示该字） |
| imageClass | null | 图片的自定义CSS类 |
| inputPlaceholder | ‘ ’ | input框中的预显示自断 |
| inputValue | ‘ ’ | input框中的初始值 |
| inputOptions | { } or Promise | input参数被设置为select（多选）or radio（单选），可以提供选择项。对象键值对中的key表示选项值，对象键值对中的values表示选项文本值 |
| inputAutoTrim | true | 自动将input值的字符串两端的空格删除 |
| inputAttributes | { } | HTML input属性（如：min，max，autocomplete，accept ），这些被加入input框，对象key表示属性名，对象values表示属性值 |
| inputValidator | null | input框的校验，should return Promise, see usage example. |
| inputClass | null | 为input框自定义CSS样式类 |
| progressSteps | [ ] | Progress steps, useful for modal queues, see usage example. |
| currentProgressStep | null | Current active progress step. The default is swal.getQueueStep(). |
| progressStepsDistance | "40px" | 进度条之间的间距 |
| onOpen | null | 当模态框打开是运行的函数，提供模态框DOM元素作为第一个参数 |
| onClose | null | 当模态框关闭时运行的函数，提供DOM元素作为第一个参数 |
| useRejections | true |
Determines whether dismissals (outside click, cancel button, close button, esc key) should reject, or resolve with an object of the format { dismiss: reason }. Set it to falseto get a cleaner control flow when using await, as explained in #485.
|
你可以使用swal.setDefaults(customParams)来重新定义默认参数，这里的customParams是一个object对象。
sweetAlert的方法：
| method | description |
| swal.isVisible() | 确定模态框是否显示 |
| swal.setDefaults（｛Object｝） | 如果最后在调用SweetAlert2时使用了很多相同的设置，可以在程序开始时使用setDefaults一次性设置！ |
| swal.resetDefaults() | 重新设置默认值 |
| swal.colse() or swal.closeModal() | 用编程的方式关闭当前打开的SweetAlert2的模态框 |
| swal.getTitle() | 获取模态框的title |
| swal.getContent() | 获取模态框的content |
| swal.getImage() | 获取image |
| swal.getConfirmButton() | 获取“Confirm”按钮 |
| swal.getCancelButton() | 获取“Cancel”按钮 |
| swal.enableButtons() | 启用Confirm和Cancel按钮 |
| swal.disableButtons() | 禁用Confirm和Cancel按钮 |
| swal.enableConfirmButton() | 仅启用Confirm按钮 |
| swal.disableConfirmButton() | 仅禁用Confirm按钮 |
| swal.enableLoading() or swal.showLoading() | 禁用按钮并且显示加载程序。这对AJAX请求很有用 |
| swal.disableLoading() or swal.hideLoading() | 启动按钮并且隐藏加载程序 |
| swal.clickConfirm() | 用编程的方式点击“确认”按钮 |
| swal.clickCancel() | 用编程的方式点击“删除”按钮 |
| swal.showValidationError(error) | 显示校验错误提示 |
| swal.resetValidationError() | 隐藏校验错误提示 |
| swal.getInput() | 获取input框的DOM节点，这个方法和input参数一起使用 |
| swal.disableInput() | 禁用input框，被禁用的input框元素不可用并且不可被点击 |
| swal.enableInput() | 启动input |
| swal.queue([Array]) | Provide array of SweetAlert2 parameters to show multiple modals, one modal after another or a function that returns alert parameters given modal number. See usage example. |
| swal.getQueueStep() |
Get the index of current modal in queue. When there's no active queue, null will be returned.
|
| swal.insertQueueStep() | Insert a modal to queue, you can specify modal positioning with second parameter. By default a modal will be added to the end of a queue. |
| swal.deleteQueueStep(index) |
Delete a modal at index from queue.
|
| swal.getProgressSteps() | Progress steps getter. |
| swal.setProgressSteps([]) | Progress steps setter. |
| swal.showProgressSteps() | Show progress steps. |
| swal.hideProgressSteps() | Hide progress steps. |
| swal.isValidParameter({String}) | Determine if parameter name is valid. |
转载于:https://my.oschina.net/u/3563169/blog/1540154
sweetalert相关推荐
- 基于cropper和sweetalert的简单图片/头像裁剪上传
基本功能 前端基本样式: 进行图片裁剪及上传: 点击上传后,js会将截取到的数据转为图片数据利用ajax发送给后台进行存储.存储成功后,刷新前端页面,头像改变. 上传成功后:自动刷新网页,更改头像 基 ...
- Ionic2中集成第三方控件Sweetalert
Ionic2混合开发,入坑系列:Ionic2中集成第三方控件Sweetalert 注:Sweetalert2已经可以直接从npm中下载安装 npm install --save sweetalert2 ...
- SweetAlert插件 弹框插件
sweetalert是一个漂亮的弹窗 中文网址: http://mishengqiang.com/sweetalert/ 它需要2个文件:sweetalert-dev.js和sweetalert.cs ...
- Jquery中使用SweetAlert使弹窗更漂亮
场景 一个漂亮的.响应性强.可定制的.可访问的JAVASCRIPT弹出框的替代. 效果 SweetAlert官网: https://sweetalert.bootcss.com/ Github: ht ...
- Django10:Ajax介绍/发送数据/SweetAlert
Ajax 异步提交 局部刷新 发送方式 1. 浏览器输入url,按enter get 2.a标签href属性 get 3.form表单 ...
- swal ajax,Sweetalert详细介绍
好长时间没有更新文章了,年底工作比较忙,确实是没有时间来写文章.今天忙里偷闲,总结了一款前端提示框的插件--sweetalert--推荐给大家. Sweetalert安装 Sweetalert官方为我 ...
- SweetAlert – 替代 Alert 的漂亮的提示效果
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...
- Android10弹出截屏对话框,Android一个美丽而聪明的警告对话框SweetAlert
由JavaScript启发SweetAlert安卓对话框 截图 建立 使用SweetAlertDialog最简单的方法是将图书馆作为AAR依赖添加到您的构建. Maven的 cn.pedant.swe ...
- SweetAlert用法
一句话介绍 SweetAlert是一个JS插件,能够完美替代JS自带的alert弹出框,并且功能强大,设计优美. 引用 直接在官网下载CSS和JavaScript文件,解压后找到/dist文件夹,里面 ...
- 利用cookies让sweetalert只出现一次
我一直在使用一个名为SweetAlert的弹出框UI轮子,该系统使用了JS& CSS.它看起来非常好,创建一个一次性的弹出框,一旦关闭,用户将无法再次看到它. <script>sw ...
最新文章
- mongodb常用语句以及SpringBoot中使用mongodb
- LSGO代码小组第17周复盘日志
- python小游戏代码大全-20行python代码的入门级小游戏的详解
- 打勾显示输入的密码 --EditText与setTransformationMethod
- Collection和Collections区别
- [高效时间管理] 番茄工作钟 windows版本
- android override作用,Android Studio中@override的含义
- 一步一步写算法（之线性队列）
- linux中程序定时重启脚本,linux下通过脚本实现自动重启程序的方法
- NGINX防御CC攻击教程
- html5小说阅读器源码,文本源码阅读器(NexusTextView)
- oracle理论笔试题,Oracle数据库笔试题（附答案）
- 《畅玩NAS》第2章 VMware ESXI安装与使用
- 2000坐标系xy坐标几位_2000坐标系(2000坐标系x和y坐标几位数)
- PCB设计及硬件编程学习
- win10记得pin码 重置密码登录
- Python如何在函数外部调用函数内部的变量
- java查找算法：线性查找
- Gabor滤波器为什么能实现频率域加窗
- matlab如何表示三峰正态分布,正态分布及常用分布的matlab编程实现