sweetalear2弹窗插件 官方原码和打包文件js,css打包文件

SweetAlert2 ----------- [](https://travis-ci.org/limonte/sweetalert2) [](https://www.npmjs.com/package/sweetalert2) [](http://standardjs.com/) [](http://isitmaintained.com/project/limonte/sweetalert2 "Average time to resolve an issue") [](https://gitter.im/sweetalert2/Lobby) [](https://www.patreon.com/limonte) [](https://www.paypal.me/limonte/5eur) A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. What's the difference between SweetAlert and SweetAlert2? --------------------------------------------------------- - [Reason of creating this fork is inactivity of original SweetAlert plugin](http://stackoverflow.com/a/27842854/1331425) - [SweetAlert to SweetAlert2 migration guide](https://github.com/limonte/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2) --- [See SweetAlert2 in action!](https://limonte.github.io/sweetalert2/) <img src="https://raw.github.com/limonte/sweetalert2/master/assets/sweetalert2.gif" width="686"> Installation ------------ ```bash npm install --save sweetalert2 ``` Or: ```bash bower install --save sweetalert2 ``` Or download from CDN: [cdnjs.com/limonte-sweetalert2](https://cdnjs.com/libraries/limonte-sweetalert2) Usage ----- ```html <script src="bower_components/sweetalert2/dist/sweetalert2.min.js"></script> <link rel="stylesheet" type="text/css" href="bower_components/sweetalert2/dist/sweetalert2.min.css"> <!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support --> <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script> ``` Or: ```js // ES6 Modules or TypeScript import swal from 'sweetalert2' // CommonJS const swal = require('sweetalert2') ``` Please note that TypeScript is supported, so you don't have to install a third-party declaration file. Examples -------- The most basic message: ```js swal('Hello world!') ``` A message signaling an error: ```js swal('Oops...', 'Something went wrong!', 'error') ``` Handling the result of SweetAlert2 modal: ```js swal({ title: 'Are you sure?', text: 'You will not be able to recover this imaginary file!', type: 'warning', showCancelButton: true, confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, keep it' }).then(function() { swal( 'Deleted!', 'Your imaginary file has been deleted.', 'success' ) }, function(dismiss) { // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer' if (dismiss === 'cancel') { swal( 'Cancelled', 'Your imaginary file is safe :)', 'error' ) } }) ``` [View more examples](https://limonte.github.io/sweetalert2/) Handling Dismissals ------------------- When an alert is dismissed by the user, the Promise returned by `swal()` will reject with a string documenting the reason it was dismissed: | String | Description | Related configuration | | ----------- | ------------------------------------------------------- | --------------------- | | `'overlay'` | The user clicked the overlay. | `allowOutsideClick` | | `'cancel'` | The user clicked the cancel button. | `showCancelButton` | | `'close'` | The user clicked the close button. | `showCloseButton` | | `'esc'` | The user pressed the <kbd>Esc</kbd> key. | `allowEscapeKey` | | `'timer'` | The timer ran out, and the alert closed automatically. | `timer` | If rejections are not handled, it will be logged as an error. To avoid this, add a rejection handler to the Promise. Alternatively, you can use `.catch(swal.noop)` as a quick way to simply suppress the errors: ```js swal(...) .catch(swal.noop) ``` Modal Types ----------- | `success` | `error` | `warning` | `info` | `question` | | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | |  |  |  |  |  | Configuration ------------- | Argument | Default value | Description | | ------------------------ | -------------------- | ----------- | | `title` | `null` | The title of the modal, as HTML. It can either be added to the object under the key "title" or passed as the first parameter of the function. | | `titleText`             | `null` | The title of the modal, as text. Useful to avoid HTML injection. | | `text`                 | `null`               | A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function. | | `html` | `null` | A HTML description for the modal. If `text` and `html` parameters are provided in the same time, "text" will be used. | | `type` | `null` | The type of the modal. SweetAlert2 comes with [5 built-in types](#modal-types) which will show a corresponding icon animation: `warning`, `error`, `success`, `info` and `question`. It can either be put in the array under the key `type` or passed as the third parameter of the function. | | `target` | `'body'` | The container element for adding modal into. | | `input` | `null` | Input field type, can be `'text'`, `'email'`, `'password'`, `'number'`, `'tel'`, `'range'`, `'textarea'`, `'select'`, `'radio'`, `'checkbox'`, `'file'` and `'url'`. | | `width` | `'500px'` | Modal window width, including paddings (`box-sizing: border-box`). Can be in `px` or `%`. | | `padding` | `20` | Modal window padding. | | `background` | `'#fff'` | Modal window background (CSS `background` property). | | `customClass` | `null` | A custom CSS class for the modal. | | `timer` | `null` | Auto close timer of the modal. Set in ms (milliseconds). | | `animation` | `true` | If set to `false`, modal CSS animation will be disabled. | | `allowOutsideClick` | `true` | If set to `false`, the user can't dismiss the modal by clicking outside it. | | `allowEscapeKey` | `true` | If set to `false`, the user can't dismiss the modal by pressing t