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