Basic Examples
SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizable, as you can see below!
Types
The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". You can also set it as "input" to get a prompt modal. It can either be put in the object under the key "type" or passed as the third parameter of the function.
Options
Custom Icon
imageUrl
is used to add a customized icon for the modal. Should contain a string with the path to the image.
Auto Close Timer
A message with auto close timer. timer
is default set to null
. You can set timer in ms (milliseconds).
Allow Outside Click
If allowOutsideClick
is set to true
, the user can dismiss the modal by clicking outside it.
Show Cancel Button
If showCancelButton
set to true
, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.
Prompt Function
A replacement for the "prompt" function. You can set type
as "input" to get a prompt modal.
Ajax Request
Set showLoaderOnConfirm
to true to disable the buttons and show that something is loading. AJAX request for example.
Confirm Options
Confirm Button Text
Use this to change the text on the "Confirm"-button. If showCancelButton
is set as true
, the confirm button will automatically show "Confirm" instead of "OK".
Confirm Button Color
Use confirmButtonColor
option to change the background color of the "Confirm"-button. It must be a HEX value.
Animations
If set to false, the modal's animation will be disabled. Possible (string) values : pop (default when animation set to true), slide-from-top, slide-from-bottom