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
|
|
