Options
All
  • Public
  • Public/Protected
  • All
Menu

Class MessageBoxConfig

Hierarchy

  • MessageBoxConfig

Index

Properties

Optional allowEnterKey

allowEnterKey: boolean

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. You can also pass a custom function returning a boolean value.

default

true

Optional allowEscapeKey

allowEscapeKey: boolean

If set to false, the user can't dismiss the modal by pressing the Escape key. You can also pass a custom function returning a boolean value, e.g. if you want to disable the escape key for the loading state of a modal.

default

true

Optional allowOutsideClick

allowOutsideClick: boolean

If set to false, the user can't dismiss the modal by clicking outside it. You can also pass a custom function returning a boolean value, e.g. if you want to disable outside clicks for the loading state of a modal.

default

true

Optional animation

animation: boolean

If set to false, modal CSS animation will be disabled.

default

true

Optional backdrop

backdrop: boolean | string

Whether or not SweetAlert2 should show a full screen click-to-dismiss backdrop. Either a boolean value or a css background value (hex, rgb, rgba, url, etc.)

default

true

Optional background

background: string

Modal window background (CSS background property).

default

'#fff'

Optional cancelButtonClass

cancelButtonClass: string = "jsfx-btn-cancel"

A custom CSS class for the "Cancel"-button.

default

null

Optional cancelButtonColor

cancelButtonColor: string

Use this to change the background color of the "Cancel"-button (must be a HEX value).

default

'#aaa'

Optional cancelButtonText

cancelButtonText: string

Use this to change the text on the "Cancel"-button.

default

'Cancel'

Optional confirmButtonClass

confirmButtonClass: string = "jsfx-btn-confirm"

A custom CSS class for the "Confirm"-button.

default

null

Optional confirmButtonColor

confirmButtonColor: string

Use this to change the background color of the "Confirm"-button (must be a HEX value).

default

'#3085d6'

Optional confirmButtonText

confirmButtonText: string

Use this to change the text on the "Confirm"-button.

default

'OK'

Optional customClass

customClass: string

A custom CSS class for the modal.

default

null

Optional focusCancel

focusCancel: boolean

Set to true if you want to focus the "Cancel"-button by default.

default

false

Optional focusConfirm

focusConfirm: boolean

Set to false if you want to focus the first element in tab order instead of "Confirm"-button by default.

default

true

Optional footer

footer: string | JQuery

The footer of the modal, as HTML.

default

null

Optional grow

grow: "row" | "column" | "fullscreen" | false

Modal window grow direction

default

false

Optional heightAuto

heightAuto: boolean

By default, SweetAlert2 sets html's and body's CSS height to auto !important. If this behavior isn't compatible with your project's layout, set heightAuto to false.

default

true

Optional html

html: string | JQuery

A HTML description for the modal. If "text" and "html" parameters are provided in the same time, "text" will be used.

default

null

Optional imageAlt

imageAlt: string

An alternative text for the custom image icon.

default

''

Optional imageClass

imageClass: string

A custom CSS class for the customized icon.

default

null

Optional imageHeight

imageHeight: number

If imageUrl is set, you can specify imageHeight to describes image height in px.

default

null

Optional imageUrl

imageUrl: string

Add a customized icon for the modal. Should contain a string with the path or URL to the image.

default

null

Optional imageWidth

imageWidth: number

If imageUrl is set, you can specify imageWidth to describes image width in px.

default

null

Optional input

input: "text" | "email" | "password" | "number" | "tel" | "range" | "textarea" | "select" | "radio" | "checkbox" | "file" | "url"

Input field type, can be text, email, password, number, tel, range, textarea, select, radio, checkbox, file and url.

default

null

Optional inputAttributes

inputAttributes: {}

HTML input attributes (e.g. min, max, step, accept...), that are added to the input field.

default

null

Type declaration

  • [attribute: string]: string

Optional inputAutoTrim

inputAutoTrim: boolean

Automatically remove whitespaces from both ends of a result string. Set this parameter to false to disable auto-trimming.

default

true

Optional inputClass

inputClass: string

A custom CSS class for the input field.

default

null

Optional inputOptions

inputOptions: JsonObject<string>

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.

Optional inputPlaceholder

inputPlaceholder: string

Input field placeholder.

default

''

Optional inputValidator

inputValidator: (inputValue: string) => Promise<string | null>

Validator for input field, may be async (Promise-returning) or sync.

default

null

Type declaration

    • (inputValue: string): Promise<string | null>
    • Parameters

      • inputValue: string

      Returns Promise<string | null>

Optional inputValue

inputValue: string

Input field initial value.

default

''

Optional keydownListenerCapture

keydownListenerCapture: boolean

Useful for those who are using SweetAlert2 along with Bootstrap modals. By default keydownListenerCapture is false which means when a user hits Esc, both SweetAlert2 and Bootstrap modals will be closed. Set keydownListenerCapture to true to fix that behavior.

default

false

Optional listeners

listeners: { closed?: (e: Event) => void; closing?: (e: Event, modal: HTMLElement) => void; confirming?: (e: Event, inputValue: any) => Promise<any | void>; opened?: (e: Event, modal: HTMLElement) => void; opening?: (e: Event, modal: HTMLElement) => void }

Type declaration

  • Optional closed?: (e: Event) => void
      • (e: Event): void
      • Parameters

        • e: Event

        Returns void

  • Optional closing?: (e: Event, modal: HTMLElement) => void
  • Optional confirming?: (e: Event, inputValue: any) => Promise<any | void>
      • (e: Event, inputValue: any): Promise<any | void>
      • Parameters

        • e: Event
        • inputValue: any

        Returns Promise<any | void>

  • Optional opened?: (e: Event, modal: HTMLElement) => void
  • Optional opening?: (e: Event, modal: HTMLElement) => void

Optional position

position: "top" | "top-start" | "top-end" | "top-left" | "top-right" | "center" | "center-start" | "center-end" | "center-left" | "center-right" | "bottom" | "bottom-start" | "bottom-end" | "bottom-left" | "bottom-right"

Modal window position

default

'center'

Optional reverseButtons

reverseButtons: boolean

Set to true if you want to invert default buttons positions.

default

false

Optional showCancelButton

showCancelButton: boolean

If set to true, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.

default

false

Optional showCloseButton

showCloseButton: boolean

Set to true to show close button in top right corner of the modal.

default

false

Optional showConfirmButton

showConfirmButton: boolean

If set to false, a "Confirm"-button will not be shown. It can be useful when you're using custom HTML description.

default

true

Optional stopKeydownPropagation

stopKeydownPropagation: boolean

If set to false, SweetAlert2 will allow keydown events propagation to the document.

default

true

Optional target

target: string

The container element for adding modal into (query selector only).

default

'body'

Optional text

text: string

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.

default

null

Optional timer

timer: number

Auto close timer of the modal. Set in ms (milliseconds).

default

null

Optional title

title: string

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.

default

null

Optional titleText

titleText: string

The title of the modal, as text. Useful to avoid HTML injection.

default

null

Optional toast

toast: boolean

Whether or not an alert should be treated as a toast notification. This option is normally coupled with the position parameter and a timer. Toasts are NEVER autofocused.

default

false

Optional type

type: "success" | "error" | "warning" | "info" | "question" | "custom" = "custom"

The type of the modal. 5 built-in types which will show a corresponding icon animation: 'warning', 'error', 'success', 'info' and 'question'.

default

null

Optional width

width: number | string

Modal window width, including paddings (box-sizing: border-box). Can be in px or %.

default

null