jq 修改swal的标题_js-jquery-SweetAlert2【二】配置与方法

一、配置

ArgumentDefault valueDescription

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标签。如果同时提供text和html参数，插件将会优先使用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种内置的情景类型：warning，error，success，info和question。它可以在参数对象的type参数中设置，也可以在swal()方法的第三个参数设置。

The type of the modal. SweetAlert2 comes with 5 built-in types which will show a corresponding icon animation: warning, error, success, info 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域的类型，可以是text, email, password,number, tel, range, textarea, select, radio,checkbox, file and url.

Input field type, can be text, email, password,number, tel, range, textarea, select, radio,checkbox, file 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的值是select或radio，你可以为它们提供选项。对象的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:

StringDescriptionRelated configuration

'overlay'

The user clicked the overlay.

'cancel'

The user clicked the cancel button.

'close'

The user clicked the close button.

'esc'

The user clicked the Esc key.

'timer'

The timer ran out, and the alert closed automatically.

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)

三、方法

MethodDescription

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.