IE11 support
Sweet Alert library doesn't support IE11 by default. In order to enable IE11 support, you need to include 2 additional files:promise.min.js
and fetch.min.js
polyfills located in /js/polyfills/
folder.
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 |
|
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 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 |