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?' )
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' });
jQuery HTML description
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 will not be able to recover this imaginary file!', type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!', closeOnConfirm: false }, function() { 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 will not be able to recover this imaginary file!', type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, cancel plx!', confirmButtonClass: 'confirm-class', cancelButtonClass: 'cancel-class', closeOnConfirm: false, closeOnCancel: false }, function(isConfirm) { if (isConfirm) { swal( 'Deleted!', 'Your file has been deleted.', 'success' ); } else { swal( 'Cancelled', 'Your imaginary file is safe :)', 'error' ); } });
A message with custom width, padding and background
swal({ text: 'Modal with a custom width, padding and background.', width: 300, padding: 100, background: 'url(http://goo.gl/jVlMUC)', });
Modal window with input field
swal({ title: 'Input something', html: '<p><input id="input-field">', showCancelButton: true, closeOnConfirm: false }, function() { 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 }, function() { swal.disableButtons(); 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.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 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". 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. It can be added to the object under the key "customClass". |
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 true, the user can 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. |
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 to the image. |
imageSize | "80x80" | If imageUrl is set, you can specify imageSize to describes how big you want the icon to be in px. Pass in a string with two values separated by an "x". The first value is the width, the second is the height. |
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). |
Feel free to fork SweetAlert2 on GitHub if you have any features that you want to add!