Here’s a comparison of a standard error message. The first one uses the built-in alert-function, while the second is using SweetAlert2.
alert('Oops... Something went wrong!')
sweetAlert( 'Oops...', 'Something went wrong!', 'error' )
Pretty cool huh? SweetAlert2 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 customizeable, as you can see below!
In these examples, we're using the shorthand function swal.
A title with a text under
swal( 'The Internet?', 'That thing is still around?', 'question' )
A success message!
swal( 'Good job!', 'You clicked the button!', 'success' )
A message with auto close timer
swal({
title: 'Auto close alert!',
text: 'I will close in 2 seconds.',
timer: 2000
})
Custom HTML description
swal({
title: 'HTML example',
html:
'You can use <b>bold text</b>, ' +
'<a href="//github.com">links</a> ' +
'and other HTML tags',
showCloseButton: true,
})
jQuery HTML
swal({
title: 'jQuery HTML example',
html: $('<div>')
.addClass('some-class')
.text('jQuery is everywhere.')
})
A warning message, with a function attached to the "Confirm"-button...
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
closeOnConfirm: false
}).then(function(isConfirm) {
if (isConfirm) {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
);
}
})
... and by passing a parameter, you can execute something else for "Cancel".
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
closeOnConfirm: false,
closeOnCancel: false
}).then(function(isConfirm) {
if (isConfirm === true) {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
);
} else if (isConfirm === false) {
swal(
'Cancelled',
'Your imaginary file is safe :)',
'error'
);
} else {
// Esc, close button or outside click
// isConfirm is undefined
}
})
A message with custom width, padding and background
swal({
text: 'Custom width, padding, background.',
width: 300,
padding: 100,
background: '#fff url(//goo.gl/enIitC)'
})
Modal window with input field
swal({
title: 'Input something',
html: '<p><input id="input-field">',
showCancelButton: true,
closeOnConfirm: false,
allowEscapeKey: false,
allowOutsideClick: false
}).then(function(isConfirm) {
if (isConfirm) {
swal({
html:
'You entered: <strong>' +
$('#input-field').val() +
'</strong>'
});
}
})
Ajax request example
swal({
title: 'Submit to run ajax request',
showCancelButton: true,
confirmButtonText: 'Submit',
closeOnConfirm: false,
allowOutsideClick: false
}).then(function(isConfirm) {
if (isConfirm) {
swal.enableLoading();
setTimeout(function() {
swal('Ajax request finished!');
}, 2000);
}
})
Method 1: Install through bower:
$ bower install sweetalert2
Method 2: Download the sweetAlert2 CSS and JavaScript files.
Download filesInitialize the plugin by referencing the necessary files:
<script src="dist/sweetalert2.min.js"></script> <link rel="stylesheet" type="text/css" href="dist/sweetalert2.min.css">
Call the sweetAlert2-function after the page has loaded
swal({
title: 'Error!',
text: 'Do you want to continue',
type: 'error',
confirmButtonText: 'Cool'
})
Here are the keys that you can use if you pass an object into sweetAlert2:
| Argument | Default value | Description |
|---|---|---|
| title | null | The title of the modal. It can either be added to the object under the key "title" or passed as the first parameter of the function. |
| text | null | 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 | A HTML description for the modal. If "text" and "html" parameters are provided in the same time, "text" will be used. |
| type | null | 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. |
| customClass | null | A custom CSS class for the modal. |
| 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 | If set to false, the user can't dismiss the modal by pressing the Escape key. |
| showConfirmButton | true | If set to false, a "Confirm"-button will not be shown. It can be useful when you're using custom HTML description. |
| showCancelButton | false | 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" | Use this to change the background color of the "Confirm"-button (must be a HEX value). |
| cancelButtonColor | "#aaa" | Use this to change the background color of the "Cancel"-button (must be a HEX value). |
| confirmButtonClass | null | A custom CSS class for the "Confirm"-button. |
| cancelButtonClass | null | A custom CSS class for the "Cancel"-button. |
| buttonsStyling | true | 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 | Set this parameter to true if you want to invert default buttons positions. |
| showCloseButton | false | Set this parameter to true to show close button in top right corner of the modal. |
| closeOnConfirm | true | Set to false if you want the modal to stay open even if the user presses the "Confirm"-button. This is especially useful if the function attached to the "Confirm"-button is another SweetAlert2. |
| imageUrl | null | 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. |
| timer | null | Auto close timer of the modal. Set in ms (milliseconds). |
| width | 500 | Modal window width, including paddings (box-sizing: border-box). |
| padding | 20 | Modal window padding. |
| background | "#fff" | Modal window background (CSS background property). |
You can redefine default params by using swal.setDefaults(customParams).
| success | ||
| error | ||
| warning | ||
| info | ||
| question |
| Method | Description |
|---|---|
| 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.close() or swal.closeModal() | Close the currently open SweetAlert2 modal programmatically. |
| swal.enableButtons() | Enable confirm and cancel buttons. |
| swal.disableButtons() | Disable confirm and cancel buttons. |
| swal.enableLoading() | Disable buttons and show loader. This is useful with AJAX requests. |
| swal.disableLoading() | Enable buttons and hide loader. |
| swal.clickConfirm() | Click "Confirm"-button programmatically. |
| swal.clickCancel() | Click "Cancel"-button programmatically. |
Feel free to fork SweetAlert2 on GitHub if you have any features that you want to add!