一、配置

Argument Default value   Description
title null 模态对话框的标题。它可以在参数对象的title参数中设置,也可以在swal()方法的第一个参数设置。  The title of the modal, as HTML. It can either be added to the object under the key "title" or passed as the first parameter of the function.
titleText null  模态对话框的内容。 The title of the modal, as text. Useful to avoid HTML injection.
text null  模态对话框的内容。它可以在参数对象的text参数中设置,也可以在swal()方法的第二个参数设置。 A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function.
html null  对话框中的内容作为HTML标签。如果同时提供texthtml参数,插件将会优先使用text参数。 A HTML description for the modal. If "text" and "html" parameters are provided in the same time, "text" will be used.
type null  对话框的情景类型。有5种内置的情景类型:warningerrorsuccessinfoquestion。它可以在参数对象的type参数中设置,也可以在swal()方法的第三个参数设置。 The type of the modal. SweetAlert2 comes with 5 built-in types which will show a corresponding icon animation: warningerrorsuccessinfo and question. It can either be put in the array under the key "type" or passed as the third parameter of the function.
target 'body'   The container element for adding modal into.
input null  表单input域的类型,可以是textemailpassword,numbertelrangetextareaselectradio,checkboxfile and url. Input field type, can be textemailpassword,numbertelrangetextareaselectradio,checkboxfile and url.
width '500px'   Modal window width, including paddings (box-sizing: border-box). Can be in px or %.
padding 20   Modal window padding.
background '#fff'   Modal window background (CSS background property).
customClass null  模态对话框的自定义class类。 A custom CSS class for the modal.
timer null   Auto close timer of the modal. Set in ms (milliseconds).
animation true  自动关闭对话框的定时器,单位毫秒。 If set to false, modal CSS animation will be disabled.
allowOutsideClick true  是否允许点击对话框外部来关闭对话框。 If set to false, the user can't dismiss the modal by clicking outside it.
allowEscapeKey true  是否允许按下Esc键来关闭对话框。 If set to false, the user can't dismiss the modal by pressing the Escape key.
allowEnterKey true  是否允许按下Enter键来提交。 If set to false, the user can't confirm the modal by pressing the Enter or Space keys, unless they manually focus the confirm button.
showConfirmButton true  是否显示“Confirm(确认)”按钮。 If set to false, a "Confirm"-button will not be shown. It can be useful when you're using custom HTML description.
showCancelButton false  是否显示“Cancel(取消)”按钮。 If set to true, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.
confirmButtonText 'OK'  确认按钮上的文本。 Use this to change the text on the "Confirm"-button.
cancelButtonText 'Cancel'  取消按钮上的文本。 Use this to change the text on the "Cancel"-button.
confirmButtonColor '#3085d6'  确认按钮的颜色。必须是HEX颜色值。 Use this to change the background color of the "Confirm"-button (must be a HEX value).
cancelButtonColor '#aaa'  取消按钮的颜色。必须是HEX颜色值。 Use this to change the background color of the "Cancel"-button (must be a HEX value).
confirmButtonClass null  确认按钮的自定义class类。 A custom CSS class for the "Confirm"-button.
cancelButtonClass null  取消按钮的自定义class类。 A custom CSS class for the "Cancel"-button.
buttonsStyling true  为按钮添加默认的swal2样式。如果你想使用自己的按钮样式,可以将该参数设置为false。 Apply default swal2 styling to buttons. If you want to use your own classes (e.g. Bootstrap classes) set this parameter to false.
reverseButtons false  如果你想反向显示按钮的位置,设置该参数为true。 Set to true if you want to invert default buttons positions ("Confirm"-button on the right side).
focusCancel false  焦点设置在取消上 Set to true if you want to focus the "Cancel"-button by default.
showCloseButton false  显示关闭,ajax Set to true to show close button in top right corner of the modal.
showLoaderOnConfirm false  展示加载中按钮,ajax Set to true to disable buttons and show that something is loading. Useful for AJAX requests.
preConfirm null  在确认之前执行的函数,返回一个Promise对象。 Function to execute before confirm, should return Promise, see usage example.
imageUrl null  为模态对话框自定义图片。指向一幅图片的URL地址。 Add a customized icon for the modal. Should contain a string with the path or URL to the image.
imageWidth null   If imageUrl is set, you can specify imageWidth to describes image width in px.
imageHeight null   Custom image height in px.
imageClass null   A custom CSS class for the customized icon.
inputPlaceholder ''  input域的占位符。 Input field placeholder.
inputValue ''  input域的初始值。 Input field initial value.
inputOptions {} or Promise  如果input的值是selectradio,你可以为它们提供选项。对象的key代表选项的值,value代表选项的文本值。 If input parameter is set to "select" or "radio", you can provide options. Object keys will represent options values, object values will represent options text values.
inputAutoTrim true  是否自动清除返回字符串前后两端的空白。 Automatically remove whitespaces from both ends of a result string. Set this parameter to false to disable auto-trimming.
inputValidator null  是否对input域进行校验,返回Promise对象。 Validator for input field, should return Promise, see usage example.
inputClass null  自定义input域的class类 A custom CSS class for the input field.
progressSteps []   Progress steps, useful for modal queues, see usage example.
currentProgressStep null   Current active progress step. The default is swal.getQueueStep()
progressStepsDistance '40px'   Distance between progress steps.
onOpen null   Function to run when modal opens, provides modal DOM element as the first argument.
onClose null   Function to run when modal closes, provides modal DOM element as the first argument.

二、HANDLING DISMISSALS

When an alert is dismissed by the user, the Promise returned by swal() will reject with a string documenting the reason it was dismissed:

String Description Related configuration
'overlay' The user clicked the overlay. allowOutsideClick
'cancel' The user clicked the cancel button. showCancelButton
'close' The user clicked the close button. showCloseButton
'esc' The user clicked the Esc key. allowEscapeKey
'timer' The timer ran out, and the alert closed automatically. timer

If rejections are not handled, it will be logged as an error. To avoid this, add a rejection handler to the Promise.
Alternatively, you can use .catch(swal.noop) as a quick way to simply suppress the errors:

swal(...)
.catch(swal.noop)

三、方法

Method   Description
swal.isVisible()   Determine if modal is shown.
swal.setDefaults({Object}) 当你在使用SweetAlert2时有大量的自定义参数,可以通过swal.setDefaults({Object})方法来将它们设置为默认参数。 If you end up using a lot of the same settings when calling SweetAlert2, you can use setDefaults at the start of your program to set them once and for all!
swal.resetDefaults() 重置设置的默认值。 Resets settings to their default value.
swal.close() orswal.closeModal() 以编程的方式关闭当前打开的SweetAlert2对话框。 Close the currently open SweetAlert2 modal programmatically.
swal.enableButtons() 确认和关闭按钮可用。 Enable "Confirm" and "Cancel" buttons.
swal.getTitle()   Get the modal title.
swal.getContent()   Get the modal content.
swal.getImage()   Get the image.
swal.getConfirmButton()   Get the "Confirm" button.
swal.getCancelButton()   Get the "Cancel" button.
swal.disableButtons() 禁用确认和关闭按钮。 Disable "Confirm" and "Cancel" buttons.
swal.enableConfirmButton()   Enable the "Confirm"-button only.
swal.disableConfirmButton()   Disable the "Confirm"-button only.
swal.showLoading() orswal.enableLoading() 禁用按钮并显示加载进度条。通常用于AJAX请求 Disable buttons and show loader. This is useful with AJAX requests.
swal.hideLoading() orswal.disableLoading() 隐藏进度条并使按钮可用。 Enable buttons and hide loader.
swal.clickConfirm() 以编程的方式点击确认按钮。 Click the "Confirm"-button programmatically.
swal.clickCancel() 以编程的方式点击取消按钮 Click the "Cancel"-button programmatically.
swal.showValidationError(error) 显示表单校验错误信息 Show validation error message.
swal.resetValidationError() 隐藏表单校验错误信息 Hide validation error message.
swal.getInput()   Get the input DOM node, this method works with input parameter.
swal.disableInput() 禁用input域 Disable input. A disabled input element is unusable and un-clickable.
swal.enableInput() 使input域可用 Enable input.
swal.queue([Array])   Provide array of SweetAlert2 parameters to show multiple modals, one modal after another. 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.

js-jquery-SweetAlert2【二】配置与方法的更多相关文章

  1. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  2. js&jquery避免报错的方法

      CreateTime--2016年12月8日15:28:40Author:Marydonjs&jquery规避报错信息的两种方式 <script type="text/ja ...

  3. js/jquery 回调函数的定义方法

    基本写法: 带参数的回调函数 以上回调函数,直接传入function作为参数,同样,还可以传入json对象作为参数...如下. 该方法的优势是可以定义多个回调函数....类似$.ajax回调函数中的s ...

  4. js jQuery取消添加超链接的方法小结

    今天在工作中需要将某个链接给取消实现只触发事件的目的,后来发现批量取消链接等,脚本之家简单的给整理了下,希望对需要的朋友有所帮助. 单个链接取消链接并触发js事件 <a href="j ...

  5. js,JQuery 生成二维码

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  6. JQuery的$和其它JS发生冲突的快速解决方法

    众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点. 然后,JS插件并非只有JQuery,还有prototype.j ...

  7. 转载 jQuery和js自定义函数和文件的方法(全网最全)

    jQuery和js自定义函数和文件的方法(全网最全)    版权声明:本文为像雾像雨又像风_http://blog.csdn.net/topdandan的原创文章,未经允许不得转载. https:// ...

  8. Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)

    jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...

  9. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

  10. 编写高质量JS代码的68个有效方法(二)

    [20141011]编写高质量JS代码的68个有效方法(二) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

随机推荐

  1. java util.Date和sql.Date转换(时区转换)

    public static Timestamp zoneTtime(String time) throws Exception{ time= "2018-08-01T10:01:21.905 ...

  2. Oracle收购Apiary来加强其API集成云

        Oracle宣布计划于1月19日收购Apiary,一家专注于API设计和协作的API管理公司.Apiary最为人所知的是API flow,其API管理平台.     Oracle并没有宣布计划 ...

  3. Centos6.5 安装配置docker

    宿主机:win7 64位   vagrant封装环境运行在VirtualBox 虚拟机上CentOS6.5,这是做测试时的一个环境,顺便错用安装docker玩玩.   centos6.5可以直接安装d ...

  4. UVA 11542 - Square(高斯消元)

    UVA 11542 - Square 题目链接 题意:给定一些数字.保证这些数字质因子不会超过500,求这些数字中选出几个,乘积为全然平方数,问有几种选法 思路:对每一个数字分解成质因子后.发现假设要 ...

  5. Linux上Nginx部署配置--二级域名配置

    http://www.cnblogs.com/yaunion/archive/2013/03/16/2962385.html http://blog.csdn.net/LBinin/article/d ...

  6. VS2015编译TIFF3.8.0源码

    没有CMakeLists.txt,不能使用CMake GUI了.源文件中有makefile.vc,所以使用nmake 进入VS2015命令行 nmake -f makefile.vc 修改nmake. ...

  7. oracle常用管理命令

    启动数据库和监听 lsnrctl start sqlplus /nolog conn sys/as sysdba startup  查看当前的实例名 show parameter instance_n ...

  8. Chosen

    前言: 想要达到下拉框有多选的情况. 过程: 1.因为本次工作项目使用的是surperUI,而它则是基于bootstrap框架搭建而成的.于是自然而然的就想到了使用bootstrap中的select插 ...

  9. beginUpdates和endUpdates-实现UITableView的动画块

    我们在做UITableView的修改,删除,选择时,需要对UITableView进行一系列的动作操作. 这样,我们就会用到 [tableView beginUpdates]; if (newCount ...

  10. poj_1037 动态规划+字典序第k大

    题目大意 给定n个数字,规定一种 cute 排序:序列中的数字大小为严格的波浪形,即 a[0] > a[1] < a[2] > a[3] < .... 或者 a[0] < ...