SweetAlert2

2023-09-28 08:12| 来源: 网络整理| 查看: 265

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes Zero dependencies Current version: ● Latest update: ● Downloads last month: Normal alert

Become the Ultimate Sponsor of SweetAlert2 and place your banner here (100K+ unique visitors per month!)

Get $100 in free credits with DigitalOcean!

Examples

A basic message

A title with a text under

A modal with a title, an error icon, a text, and a footer

A modal window with a long content inside:

Custom HTML description and buttons with ARIA labels

A dialog with three buttons

A custom positioned dialog

Custom animation with Animate.css

A confirm dialog, with a function attached to the "Confirm"-button

... and by passing a parameter, you can execute something else for "Cancel"

A message with a custom image

A message with custom width, padding, background and animated Nyan Cat

A message with auto close timer

Right-to-left support for Arabic, Persian, Hebrew, and other RTL languages

AJAX request example

Chaining modals (queue) example

Dynamic queue example

Download & install $ npm install sweetalert2

Or grab from jsdelivr CDN

Usage

1. Initialize the plugin by referencing the necessary files:

You can also include the stylesheet separately if desired:

// ES6 Modules or TypeScript import Swal from 'sweetalert2' // CommonJS const Swal = require('sweetalert2')

It's possible to import JS and CSS separately, e.g. if you need to customize styles:

import Swal from 'sweetalert2/dist/sweetalert2.js' import 'sweetalert2/src/sweetalert2.scss'

2. Call the sweetAlert2-function after the page has loaded

Swal.fire({ title: 'Error!', text: 'Do you want to continue', icon: 'error', confirmButtonText: 'Cool' }) Integrations with major JS frameworks React

Vue

Angular

Configuration

Here are the keys that you can use if you pass an object into sweetAlert2:

Argument (Default value) Description title '' The title of the popup, as HTML. titleText '' The title of the popup, as text. Useful to avoid HTML injection. html '' A HTML description for the popup. [Security] SweetAlert2 does NOT sanitize this parameter. It is the developer's responsibility to escape any user input when using the html option, so XSS attacks would be prevented. text '' A description for the popup. If "text" and "html" parameters are provided in the same time, "text" will be used. icon undefined The icon of the popup. SweetAlert2 comes with 5 built-in icon which will show a corresponding icon animation: warning, error, success, info, and question. It can either be put in the array under the key "icon" or passed as the third parameter of the function. iconColor undefined Use this to change the color of the icon. iconHtml undefined The custom HTML content for an icon. showClass { popup: 'swal2-show', backdrop: 'swal2-backdrop-show', icon: 'swal2-icon-show' } CSS classes for animations when showing a popup (fade in) hideClass { popup: 'swal2-hide', backdrop: 'swal2-backdrop-hide', icon: 'swal2-icon-hide' } CSS classes for animations when hiding a popup (fade out) footer '' The footer of the popup. Can be either plain text or HTML. backdrop true Whether or not SweetAlert2 should show a full screen click-to-dismiss backdrop. Can be either a boolean or a string which will be assigned to the CSS background property. toast false Whether or not an alert should be treated as a toast notification. This option is normally coupled with the position parameter and a timer. Toasts are NEVER autofocused. target 'body' The container element for adding popup into. input undefined Input field type, can be text, email, password, number, tel, range, textarea, select, radio, checkbox, file and url. width undefined Popup window width, including paddings (box-sizing: border-box). Can be in px or %. The default width is 32rem. padding undefined Popup window padding. The default padding is 1.25rem. background undefined Popup window background (CSS background property). The default background is '#fff'. position 'center' Popup window position, can be 'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end'. grow false Paired with window position, sets the direction the popup should grow in, can be set to 'row', 'column', 'fullscreen', or false. customClass undefined A custom CSS class for the popup: customClass: { container: '...', popup: '...', header: '...', title: '...', closeButton: '...', icon: '...', image: '...', content: '...', htmlContainer: '...', input: '...', inputLabel: '...', validationMessage: '...', actions: '...', confirmButton: '...', denyButton: '...', cancelButton: '...', loader: '...', footer: '....' } timer undefined Auto close timer of the popup. Set in ms (milliseconds). See also Swal.getTimerLeft(), Swal.stopTimer(), Swal.resumeTimer(), Swal.toggleTimer(), Swal.isTimerRunning() and Swal.increaseTimer(). timerProgressBar false If set to true, the timer will have a progress bar at the bottom of a popup. Mostly, this feature is useful with toasts. animation true Deprecated and will be removed in the next major release, use showClass and hideClass instead: Swal.fire({ ..., showClass: { popup: 'swal2-noanimation', backdrop: 'swal2-noanimation' }, hideClass: { popup: '', backdrop: '' } }) If set to false, popup CSS animation will be disabled. heightAuto true By default, SweetAlert2 sets html's and body's CSS height to auto !important. If this behavior isn't compatible with your project's layout, set heightAuto to false. allowOutsideClick true If set to false, the user can't dismiss the popup by clicking outside it.You can also pass a custom function returning a boolean value, e.g. if you want to disable outside clicks for the loading state of a popup. allowEscapeKey true If set to false, the user can't dismiss the popup by pressing the Esc key. You can also pass a custom function returning a boolean value, e.g. if you want to disable the Esc key for the loading state of a popup. allowEnterKey true If set to false, the user can't confirm the popup by pressing the Enter or Space keys, unless they manually focus the confirm button. You can also pass a custom function returning a boolean value. stopKeydownPropagation true If set to false, SweetAlert2 will allow keydown events propagation to the document. keydownListenerCapture false Useful for those who are using SweetAlert2 along with Bootstrap modals. By default keydownListenerCapture is false which means when a user hits Esc, both SweetAlert2 and Bootstrap modals will be closed. Set keydownListenerCapture to true to fix that behavior. showConfirmButton true If set to false, a "Confirm"-button will not be shown. showDenyButton false If set to true, a "Deny"-button will be shown. It can be useful when you want a popup with 3 buttons. showCancelButton false If set to true, a "Cancel"-button will be shown, which the user can click on to dismiss the modal. confirmButtonText 'OK' Use this to change the text on the "Confirm"-button. denyButtonText 'No' Use this to change the text on the "Deny"-button. cancelButtonText 'Cancel' Use this to change the text on the "Cancel"-button. confirmButtonColor undefined Use this to change the background color of the "Confirm"-button. The default color is #3085d6 denyButtonColor undefined Use this to change the background color of the "Deny"-button. The default color is #dd6b55 cancelButtonColor undefined Use this to change the background color of the "Cancel"-button. The default color is #aaa confirmButtonAriaLabel '' Use this to change the aria-label for the "Confirm"-button. denyButtonAriaLabel '' Use this to change the aria-label for the "Deny"-button. cancelButtonAriaLabel '' Use this to change the aria-label for the "Cancel"-button. buttonsStyling true Apply default styling to buttons. If you want to use your own classes (e.g. Bootstrap classes) set this parameter to false. reverseButtons false Set to true if you want to invert default buttons positions ("Confirm"-button on the right side). focusConfirm true Set to false if you want to focus the first element in tab order instead of "Confirm"-button by default. returnFocus true Set to false if you don't want to return the focus to the element that invoked the modal after the modal is closed. focusDeny false Set to true if you want to focus the "Deny"-button by default. focusCancel false Set to true if you want to focus the "Cancel"-button by default. showCloseButton false Set to true to show close button in top right corner of the popup. closeButtonHtml '×' Use this to change the content of the close button. closeButtonAriaLabel 'Close this dialog' Use this to change the aria-label for the close button. loaderHtml '' Use this to change the HTML content of the loader. showLoaderOnConfirm false Set to true to disable buttons and show the loader instead of the Confirm button. Use it in combination with the preConfirm parameter. showLoaderOnDeny false Set to true to disable buttons and show the loader instead of the Deny button. Use it in combination with the preDeny parameter. scrollbarPadding true Set to false to disable body padding adjustment when the page scrollbar gets hidden while the popup is shown preConfirm undefined Function to execute before confirming, may be async (Promise-returning) or sync. Returned (or resolved) value can be: false to prevent a popup from closing anything else to pass that value as the result.value of Swal.fire() undefined to keep the default result.value See usage example. preDeny undefined Function to execute before denying, may be async (Promise-returning) or sync. Returned (or resolved) value can be: false to prevent a popup from closing anything else to pass that value as the result.value of Swal.fire() undefined to keep the default result.value returnInputValueOnDeny false If you want to return the input value as result.value when denying the popup, set to true. Otherwise, the denying will set result.value to false. imageUrl undefined Add a customized icon for the popup. Should contain a string with the path or URL to the image. imageWidth undefined If imageUrl is set, you can specify imageWidth to describes image width in px. imageHeight undefined Custom image height in px. imageAlt '' An alternative text for the custom image icon. inputLabel '' Input field label. inputPlaceholder '' Input field placeholder. inputValue '' Input field initial value. If the input type is select, inputValue will represent the selected tag. If the input type is checkbox, inputValue will represent the checked state. If the input type is text, email, number, tel or textarea a Promise can be accepted as inputValue. inputOptions {} If input parameter is set to "select" or "radio", you can provide options. Can be a Map or a plain object, with keys that represent option values and values that represent option text. You can also provide plain object or Map as values that will represented a group of options, being the label of this the key. Finally, you can also provide a Promise that resolves with one of those types. inputAutoTrim true Automatically remove whitespaces from both ends of a result string. Set this parameter to false to disable auto-trimming. inputAttributes {} HTML input attributes (e.g. min, max, autocomplete, accept), that are added to the input field. Object keys will represent attributes names, object values will represent attributes values. inputValidator undefined Validator for input field, may be async (Promise-returning) or sync. Returned (or resolved) value can be: a falsy value (undefined, null, false) for indicating success a string value (error message) for indicating failure See usage example. validationMessage undefined A custom validation message for default validators (email, url). progressSteps [] Progress steps, useful for queues, see usage example. currentProgressStep undefined Current active progress step. The default is Swal.getQueueStep() progressStepsDistance undefined Distance between progress steps. willOpen undefined Popup lifecycle hook. Synchronously runs before the popup is shown on screen. Provides popup DOM element as the argument. onBeforeOpen Deprecated, use willOpen instead didOpen undefined Popup lifecycle hook. Asynchronously runs after the popup has been shown on screen. Provides popup DOM element as the argument. onOpen Deprecated, use didOpen instead didRender undefined Popup lifecycle hook. Synchronously runs after the popup DOM has been updated (ie. just before the popup is repainted on the screen). Provides popup DOM element as the argument. Typically, this will happen after Swal.fire() or Swal.update(). If you want to perform changes in the popup's DOM, that survive Swal.update(), prefer didRender over willOpen. onRender Deprecated, use didRender instead willClose undefined Popup lifecycle hook. Synchronously runs when the popup closes by user interaction (and not due to another popup being fired). Provides popup DOM element as the argument. onClose Deprecated, use willClose instead didClose undefined Popup lifecycle hook. Asynchronously runs after the popup has been disposed by user interaction (and not due to another popup being fired). onAfterClose Deprecated, use didClose instead didDestroy undefined Popup lifecycle hook. Synchronously runs after popup has been destroyed either by user interaction or by another popup. If you have cleanup operations that you need to reliably execute each time a popup is closed, prefer didDestroy over didClose. onDestroy Deprecated, use didDestroy instead

You can easily reuse configuration by creating your own `Swal` with Swal.mixin({ ...options }):

Mixin example

Declarative templates and declarative triggering

There's also the declarative way to define a popup, via the tag. This is handy when you want to define popup on server side (SSR).

Declarative template example

Save changes to "Untitled 1" before closing? Save As Cancel Close without Saving Save changes to "Untitled 1" before closing? Save As Cancel Close without Saving

Supported template elements:

... ... ... ... ... ...

And you can even trigger SweetAlert2 popups declaratively! Use the bindClickHandler() method for that:

Trigger modal Trigger toast Handling Buttons (Confirm, Deny, Cancel)

When the user clicks a button, the Promise returned by Swal.fire() will be resolved with the SweetAlertResult object:

Key Description isConfirmed The "Confirm" button was clicked, the value will contain the result isDenied The "Deny" button was clicked, the value will be false. Alternatively, if there's an input in a popup, you can use returnInputValueOnDeny: true to return the input's value. isDismissed The "Cancel" button was clicked, the dismiss will be Swal.DismissReason.cancel value The value from the popup, possible values: true for simple confirmed dialogs false for denied popups any value for popups with inputs dismiss The dismissal reason, see the Handling Dismissals section for details Handling Dismissals

When an alert is dismissed by the user, the Promise returned by Swal.fire() will be resolved with an object { isDismissed: true, dismiss: reason } documenting the reason it was dismissed:

Reason Description Related configuration Swal.DismissReason.backdrop The user clicked the backdrop. allowOutsideClick Swal.DismissReason.cancel The user clicked the cancel button. showCancelButton Swal.DismissReason.close The user clicked the close button. showCloseButton Swal.DismissReason.esc The user clicked the Esc key. allowEscapeKey Swal.DismissReason.timer The timer ran out, and the alert closed automatically. timer Icons success error warning ! info i question ? Input Types text email url password textarea select radio checkbox file range

Multiple inputs aren't supported, you can achieve them by using html and preConfirm parameters. Inside the preConfirm() function you can return (or, if async, resolve with) the custom result:

Methods Method Description Swal.isVisible() Determine if popup is shown. Swal.mixin({ ...options }) Returns an extended version of `Swal` containing `params` as defaults. Useful for reusing Swal configuration. Swal.update({ ...options }) Updates popup options. Swal.close() Close the currently open SweetAlert2 popup programmatically, the Promise returned by Swal.fire() will be resolved with an empty object { } Swal.getContainer() Get the popup container which contains the backdrop. Swal.getHeader() Get the popup header. The header contains progress steps, the icon, the image, the title, and the close button. Swal.getTitle() Get the popup title. Swal.getProgressSteps() Get the progress steps. Swal.getCloseButton() Get the close button. Swal.getIcon() Get the icon. Swal.getContent() Get the popup content. Swal.getHtmlContainer() Gets the DOM element where the html/text parameter is rendered to. Swal.getImage() Get the image. Swal.getActions() Get the actions block (buttons container). Swal.getFooter() Get the popup footer. Swal.getFocusableElements() Get all focusable elements in the popup. Swal.getConfirmButton() Get the "Confirm" button. Swal.getDenyButton() Get the "Deny" button. Swal.getCancelButton() Get the "Cancel" button. Swal.enableButtons() Enable "Confirm" and "Cancel" buttons. Swal.disableButtons() Disable "Confirm" and "Cancel" buttons. Swal.showLoading() Shows loader (spinner), this is useful with AJAX requests. By default the loader be shown instead of the "Confirm" button, but if you want another button to be replaced with a loader, just pass it like this: Swal.showLoading(Swal.getDenyButton()) Swal.hideLoading() Hides loader and shows back the button which was hidden by .showLoading() Swal.isLoading() Determine if popup is in the loading state. Related methods: Swal.showLoading() and Swal.hideLoading() Swal.getTimerLeft() Returns the time left in case when timer parameter is set. Swal.stopTimer() Stops the timer in case when timer parameter is set. Returns the time left Swal.resumeTimer() Resume the timer previously stopped. Returns the time left Swal.toggleTimer() Toggle state of the timer between stopped and running. Returns the time left Swal.isTimerRunning() Returns the status of a timer: true if is running, false if it's paused Swal.increaseTimer(n) Increase the timer by n milliseconds. Returns the time left Swal.clickConfirm() Click the "Confirm"-button programmatically. Swal.clickDeny() Click the "Deny"-button programmatically. Swal.clickCancel() Click the "Cancel"-button programmatically. Swal.getInput() Get the input DOM node, this method works with input parameter. Swal.disableInput() Disable input. A disabled input element is unusable and un-clickable. Swal.enableInput() Enable input. Swal.showValidationMessage(message) Show the validation message DOM node. Swal.resetValidationMessage() Hide the validation message DOM node. Swal.getValidationMessage() Get the validation message DOM node. Swal.queue([Array]) Provide array of SweetAlert2 parameters to show multiple popups, one popup after another. See usage example Swal.getQueueStep() Get the index of current popup in queue. When there's no active queue, null will be returned. Swal.insertQueueStep() Insert a popup to queue, you can specify popup positioning with second parameter. By default a popup will be added to the end of a queue. Swal.deleteQueueStep(index) Delete a popup at index from queue. Swal.isValidParameter(param) Determine if parameter name is valid. Swal.isUpdatableParameter(param) Determine if parameter name is valid for Swal.update() method. Themes Dark theme dark