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: successoption
|
|
| Error type |
Error notification type using type: erroroption
|
|
| Warning type |
Warning notification type using type: warningoption
|
|
| Info type |
Info notification type using type: infooption
|
|
| Question type |
Question notification type using type: questionoption
|
|
| 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 timeroption
|
|
| Dynamic queue | Display a loading animation while working on request | |
| 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 trueif you want to invert default buttons positions ("Confirm"-button on the right side)
|
|
| Fullscreen |
Use grow: 'fullscreen'option to show notification in fullscreenmode
|
|
| Stretched vertically |
Use grow: 'column'option to show notification in columnmode
|
|
| Stretched horizontally |
Use grow: 'row'to show notification in rowmode
|
|
| Disabled keyboard interaction | This example can't be dismissed by pressing the Escape, Spaceor Enterkeys | |
| Disabled animation |
If animationoption is set to false, modal CSS animation will be disabled
|
|
| Disabled backdrop |
Set backdropoption to falseto disable a full screen click-to-dismiss backdrop
|
|
| Disabled outside click |
Set allowOutsideClickoption to falseto disable modal dismiss by clicking outside it
|
|
| Input types | ||
| Text input type |
Example of textinput type
|
|
| Email input type |
Example of emailinput type
|
|
| URL input type |
Example of urlinput type
|
|
| Password input type |
Example of passwordinput type
|
|
| Textarea input type |
Example of textareainput type
|
|
| Select input type |
Example of selectinput type
|
|
| Select2 single |
Example of a singleselect2select
|
|
| Select2 multiple |
Example of multipleselect2select
|
|
| Multiselect | Example of SweetAlert modal with Bootstrap Multiselect and validation | |
| Radio input type |
Example of SweetAlert popup with default radioinput type
|
|
| Radio custom |
Example of SweetAlert popup with custom radioinput type
|
|
| Checkbox input type |
Example of SweetAlert popup with default checkboxinput type
|
|
| Checkbox custom |
Example of SweetAlert popup with custom checkboxinput type
|
|
| Switchery |
Example of SweetAlert popup with custom switcherycheckbox type
|
|
| File input type |
Example of SweetAlert popup with default fileinput type
|
|
| Range input type |
Example of rangeinput 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
|
|
| 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
|
|