SweetAlert Notifications
SweetAlert is a simple yet powerful replacement for JS popup boxes. With this extension you can easily replace boring browser alerts with beautiful animated popups that look like a modal dialog. Supports form controls (input fields, checkboxes, selects, radios etc) with validation, various notification types with animated icons and bunch of options for deeper customization.
| Notification types | ||
|---|---|---|
| Success type | Success notification type using type: success option |
|
| Error type | Error notification type using type: error option |
|
| Warning type | Warning notification type using type: warning option |
|
| Info type | Info notification type using type: info option |
|
| Question type | Question notification type using type: question option |
|
| Combine messages | Message with a function attached to the "Confirm" and "Cancel" buttons | |
| Basic examples | ||
| Basic alert | Basic sweet alert example with title only | |
| Title with text | Display additional text below the title | |
| Close button | Show close button in top right corner of the modal | |
| Custom padding | Modal window padding in pixels. Default padding value is 20px | |
| Custom width | Modal window width, including paddings (box-sizing: border-box). Can be in px or % | |
| Auto closer | Close the alert after specified amount of time using timer option |
|
| AJAX requests | Example with AJAX request, validation and callback | |
| With HTML message | Add support of HTML in alert message | |
| With custom image | Notification message with a custom image. Image size is specified in config | |
| With custom background image | Notification message with a custom background image. Image source is specified in config | |
| Chaining notifications | Display multiple chaining modals with steps progress | |
| Reversed buttons | Set to true if you want to invert default buttons positions ("Confirm"-button on the right side) |
|
| Fullscreen | Use grow: 'fullscreen' option to show notification in fullscreen mode |
|
| Stretched vertically | Use grow: 'column' option to show notification in column mode |
|
| Stretched horizontally | Use grow: 'row' to show notification in row mode |
|
| Disabled keyboard interaction | This example can't be dismissed by pressing the Escape , Space or Enter keys | |
| Disabled animation | If animation option is set to false, modal CSS animation will be disabled |
|
| Disabled backdrop | Set backdrop option to false to disable a full screen click-to-dismiss backdrop |
|
| Disabled outside click | Set allowOutsideClick option to false to disable modal dismiss by clicking outside it |
|
| Input types | ||
| Text input type | Example of text input type |
|
| Email input type | Example of email input type |
|
| URL input type | Example of url input type |
|
| Password input type | Example of password input type |
|
| Textarea input type | Example of textarea input type |
|
| Select input type | Example of select input type |
|
| Select2 single | Example of a single select2 select |
|
| Select2 multiple | Example of multiple select2 select |
|
| Multiselect | Example of SweetAlert modal with Bootstrap Multiselect and validation | |
| Radio input type | Example of SweetAlert popup with default radio input type |
|
| Checkbox input type | Example of SweetAlert popup with default checkbox input type |
|
| Range input type | Example of range input type |
|
| Positions | ||
| Top | Add position: 'top' to change notification position to top |
|
| Top left | Add position: 'top-left' to change notification position to top left |
|
| Top right | Add position: 'top-right' to change notification position to top right |
|
| Center left | Add position: 'center-left' to change notification position to center left |
|
| Center right | Add position: 'center-right' to change notification position to center right |
|
| Bottom | Add position: 'bottom' to change notification position to bottom |
|
| Bottom left | Add position: 'bottom-left' to change notification position to bottom left |
|
| Bottom right | Add position: 'bottom-right' to change notification position to bottom right |
|
| Toasts | ||
| Success type | Success toast type using type: success option |
|
| Error type | Error toast type using type: error option |
|
| Warning type | Warning toast type using type: warning option |
|
| Info type | Info toast type using type: info option |
|
| Question type | Question toast type using type: question option |
|
| Top | Add position: 'top' to change toast position to top |
|
| Top left | Add position: 'top-left' to change toast position to top left |
|
| Center left | Add position: 'center-left' to change toast position to center left |
|
| Center | Add position: 'center' to change toast position to center |
|
| Center right | Add position: 'center-right' to change toast position to center right |
|
| Bottom | Add position: 'bottom' to change toast position to bottom |
|
| Bottom left | Add position: 'bottom-left' to change toast position to bottom left |
|
| Bottom right | Add position: 'bottom-right' to change toast position to bottom right |
|
| Callbacks | ||
| onOpen | Function to run when modal opens, provides modal DOM element as the first argument |
|
| onClose | Function to run when modal closes, provides modal DOM element as the first argument |
|
