<p align="center">
<a href="https://sweetalert2.github.io/">
<img src="/assets/swal2-logo.png" alt="SweetAlert2">
</a>
</p>
<p align="center">
A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
</p>
<p align="center">
<a href="https://sweetalert2.github.io/">
<img src="https://raw.github.com/sweetalert2/sweetalert2/master/assets/sweetalert2.gif" width="562"><br>
See SweetAlert2 in action ↗
</a>
</p>
<p align="center">
<a href="https://github.com/sweetalert2/sweetalert2/actions"><img alt="Build Status" src="https://github.com/sweetalert2/sweetalert2/workflows/build/badge.svg"></a>
<a href="https://coveralls.io/github/sweetalert2/sweetalert2?branch=master"><img src="https://coveralls.io/repos/github/sweetalert2/sweetalert2/badge.svg?branch=master&" alt="Coverage Status"></a>
<a href="https://www.npmjs.com/package/sweetalert2"><img alt="Version" src="https://img.shields.io/npm/v/sweetalert2.svg"></a>
<a href="https://www.jsdelivr.com/package/npm/sweetalert2"><img alt="jsdelivr" src="https://data.jsdelivr.com/v1/package/npm/sweetalert2/badge?style=rounded"></a>
<a href="#support-and-donations"><img alt="Support Donate" src="https://ionicabizau.github.io/badges/paypal.svg"></a>
</p>
---
:shipit: The author of SweetAlert2 ([@limonte](https://github.com/limonte/)) is looking for short-term to medium-term working contracts in front-end, preferably OSS.
---
:point_right: **Upgrading from v8.x to v9.x?** [Read the release notes!](https://github.com/sweetalert2/sweetalert2/releases/tag/v9.0.0)
<br>If you're upgrading from v7.x, please [upgrade from v7 to v8](https://github.com/sweetalert2/sweetalert2/releases/tag/v8.0.0) first!
<br>If you're upgrading from v6.x, please [upgrade from v6 to v7](https://github.com/sweetalert2/sweetalert2/releases/tag/v7.0.0) first!
:point_right: **Migrating from [SweetAlert](https://github.com/t4t5/sweetalert)?** [SweetAlert 1.x to SweetAlert2 migration guide](https://github.com/sweetalert2/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2)
---
Installation
------------
```sh
npm install --save sweetalert2
```
Or grab from [jsdelivr CDN](https://www.jsdelivr.com/package/npm/sweetalert2)
:
```html
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
```
Usage
-----
```html
<script src="sweetalert2/dist/sweetalert2.all.min.js"></script>
<!-- Include a polyfill for ES6 Promises (optional) for IE11 -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill9/dist/polyfill.js"></script>
```
You can also include the stylesheet separately if desired:
```html
<script src="sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2/dist/sweetalert2.min.css">
```
Or:
```js
// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal = require('sweetalert2')
```
Or with JS modules:
```html
<link rel="stylesheet" href="sweetalert2/dist/sweetalert2.css">
<script type="module">
import Swal from 'sweetalert2/src/sweetalert2.js'
</script>
```
It's possible to import JS and CSS separately, e.g. if you need to customize styles:
```js
import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'
```
Please note that [TypeScript is well-supported](https://github.com/sweetalert2/sweetalert2/blob/master/sweetalert2.d.ts), so you don't have to install a third-party declaration file.
Examples
--------
The most basic message:
```js
Swal.fire('Hello world!')
```
A message signaling an error:
```js
Swal.fire('Oops...', 'Something went wrong!', 'error')
```
Handling the result of SweetAlert2 modal:
```js
Swal.fire({
title: 'Are you sure?',
text: 'You will not be able to recover this imaginary file!',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, keep it'
}).then((result) => {
if (result.value) {
Swal.fire(
'Deleted!',
'Your imaginary file has been deleted.',
'success'
)
// For more information about handling dismissals please visit
// https://sweetalert2.github.io/#handling-dismissals
} else if (result.dismiss === Swal.DismissReason.cancel) {
Swal.fire(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
```
## [Go here to see the docs and more examples ↗](https://sweetalert2.github.io/)
Browser compatibility
---------------------
IE11* | Edge | Chrome | Firefox | Safari | Opera | UC Browser
-------|------|--------|---------|--------|-------|------------
:heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
\* ES6 Promise polyfill should be included, see [usage example](#usage).
Note that SweetAlert2 **does not** and **will not** provide support or functionality of any kind on IE10 and lower.
Themes ([`sweetalert2-themes ↗`](https://github.com/sweetalert2/sweetalert2-themes))
------
- [`Dark`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/dark)
- [`Minimal`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/minimal)
- [`Borderless`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/borderless)
- [`Bootstrap 4`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/bootstrap-4)
- [`Material UI`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/material-ui)
- [`Default`](https://github.com/sweetalert2/sweetalert2-themes/tree/master/default)
Related projects
-------------------------
- [ngx-sweetalert2](https://github.com/sweetalert2/ngx-sweetalert2) - Angular 4+ integration
- [sweetalert2-react-content](https://github.com/sweetalert2/sweetalert2-react-content) - React integration
- [sweetalert2-webpack-demo](https://github.com/sweetalert2/sweetalert2-webpack-demo) - webpack demo
- [sweetalert2-parcel-demo](https://github.com/sweetalert2/sweetalert2-parcel-demo) - overriding SCSS variables demo
Related community projects
-------------------------
- [avil13/vue-sweetalert2](https://github.com/avil13/vue-sweetalert2) - Vue.js wrapper
- [realrashid/sweet-alert](https://github.com/realrashid/sweet-alert) - Laravel 5 Package
- [Basaingeal/Razor.SweetAlert2](https://github.com/Basaingeal/Razor.SweetAlert2) - Blazor Wrapper
- [ElectronAlert](https://electron.guide/electron-alert/) - SweetAlert2 for Electron applications (main process)
Collaborators
-------------
[![](https://avatars3.githubusercontent.com/u/17089396?v=4&s=80)](https://github.com/gverni) | [![](https://avatars3.githubusercontent.com/u/3198597?v=4&s=80)](https://github.com/zenflow) | [![](https://avatars1.githubusercontent.com/u/1343250?v=4&s=80)](https://github.com/toverux) | [![](https://avatars3.githubusercontent.com/u/9093699?v=4&s=80)](https://github.com/acupajoe)
-|-|-|-|
[@gverni](https://github.com/gverni) | [@zenflow](https://github.com/zenflow) | [@toverux](https://github.com/toverux) | [@acupajoe](https://github.com/acupajoe)
Contributing
------------
[![Maintainability](https://api.codeclimate.com/v1/badges/eba34bb80477933854d4/maintainability)](https://codeclimate.com/github/sweetalert2/sweetalert2/maintainability)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/sweetalert2/sweetalert2/blob/master/CHANGELOG.md)
If you would like to contribute enhancements or fixes, please do the following:
1. Fork the `sweetalert2` repository and clone it locally.
2. Make sure you have [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) installed.
3. When in the SweetAlert2 directory, run `npm install` or `yarn install` to install dependencies.
4. To begin active development, run `npm start` or `yarn start`. This does several things for you:
- Builds the `dist` folder
- Serves sandbox.html @ http://localhost:8080/ (browser-sync ui: http://localhos
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
毕设-基于微信小程序课堂管理系统后台.zip (1187个子文件)
.babelrc 149B
.browserslistrc 192B
mvnw.cmd 6KB
CNAME 20B
bootstrap.css 143KB
bootstrap.css 140KB
bootstrap.min.css 121KB
bootstrap.min.css 118KB
bootstrap.css 117KB
bootstrap.css 117KB
bootstrap.min.css 95KB
bootstrap.min.css 95KB
font-awesome.css 37KB
sweetalert2.css 36KB
font-awesome.min.css 30KB
sweetalert2.min.css 29KB
bootstrap-theme.css 26KB
bootstrap-theme.min.css 23KB
docs.min.css 21KB
bootstrap-theme.css 16KB
bootstrap-theme.min.css 15KB
bootstrap-datetimepicker.css 12KB
bootstrap-select.css 12KB
bootstrap-select.css 12KB
bootstrap-datetimepicker.min.css 11KB
bootstrap-table-bulma.css 11KB
bootstrap-table-semantic.css 11KB
bootstrap-select.min.css 10KB
bootstrap-select.min.css 10KB
bootstrap-table-foundation.css 10KB
bootstrap-table-materialize.css 10KB
bootstrap-table-bulma.min.css 10KB
bootstrap-table-semantic.min.css 10KB
bootstrap-table-foundation.min.css 9KB
bootstrap-table.css 9KB
bootstrap-table-materialize.min.css 9KB
bootstrap-table.min.css 9KB
toastr.css 7KB
style.css 7KB
custom.css 6KB
qunit.css 5KB
base.css 2KB
style.css 2KB
bootstrap-treeview.css 1KB
bootstrap-table-reorder-rows.min.css 1KB
myclass.css 887B
github.min.css 871B
bootstrap-table-fixed-columns.min.css 824B
bootstrap-table-reorder-rows.css 802B
bootstrap-table-reorder-rows.css 802B
bootstrap-table-page-jump-to.min.css 644B
bootstrap-table-cell-input.min.css 605B
bootstrap-table-sticky-header.min.css 558B
bootstrap-table-fixed-columns.css 547B
bootstrap-table-fixed-columns.css 547B
bootstrap-table-group-by.min.css 468B
bootstrap-table-filter-control.min.css 412B
bootstrap-table-sticky-header.css 361B
bootstrap-table-sticky-header.css 361B
bootstrap-table-page-jump-to.css 336B
bootstrap-table-page-jump-to.css 336B
bootstrap-table-cell-input.css 314B
bootstrap-table-cell-input.css 314B
courseDetail.css 196B
bootstrap-table-filter-control.css 187B
bootstrap-table-filter-control.css 187B
bootstrap-table-group-by.css 151B
bootstrap-table-group-by.css 151B
index.css 137B
login.css 130B
bootstrap-tab.css 120B
students.css 114B
data.css 29B
.editorconfig 229B
deploy_key.enc 3KB
fontawesome-webfont.eot 162KB
glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.eot 14KB
.eslintignore 31B
Gemfile 310B
.gitattributes 483B
.gitattributes 378B
.gitignore 735B
.gitignore 420B
.gitignore 333B
.gitignore 214B
.gitignore 148B
.gitignore 67B
.gitignore 39B
Tab_all.html 15KB
myclass.html 15KB
attendanceHistory.html 13KB
courseDetail.html 13KB
bootstrap4.html 11KB
bootstrap3.html 11KB
students.html 10KB
data.html 10KB
user.html 7KB
index.html 6KB
main.html 6KB
共 1187 条
- 1
- 2
- 3
- 4
- 5
- 6
- 12
资源评论
- m0_749928122024-11-15感谢资源主的分享,很值得参考学习,资源价值较高,支持!
马coder
- 粉丝: 1245
- 资源: 6593
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 【路径规划】未来搜索算法栅格地图机器人最短路径规划【含Matlab仿真 2868期】.zip
- 【路径规划】北方苍鹰算法栅格地图机器人最短路径规划【含Matlab仿真 2946期】.zip
- 【路径规划】白鲸算法栅格地图机器人最短路径规划【含Matlab仿真 2945期】.zip
- 【路径规划】材料生成算法栅格地图机器人最短路径规划【含Matlab仿真 2947期】.zip
- 【路径规划】法医调查算法栅格地图机器人最短路径规划【含Matlab仿真 2948期】.zip
- 【路径规划】广义正态分布算法栅格地图机器人最短路径规划【含Matlab仿真 2949期】.zip
- 【路径规划】金枪鱼算法栅格地图机器人最短路径规划【含Matlab仿真 2951期】.zip
- 【路径规划】金豺狼算法栅格地图机器人最短路径规划【含Matlab仿真 2950期】.zip
- 【路径规划】晶体结构算法栅格地图机器人最短路径规划【含Matlab仿真 2923期】.zip
- 【路径规划】孔雀算法栅格地图机器人最短路径规划【含Matlab仿真 2952期】.zip
- 【路径规划】猎食者算法栅格地图机器人最短路径规划【含Matlab仿真 2925期】.zip
- 【路径规划】爬行动物算法栅格地图机器人最短路径规划【含Matlab仿真 2926期】.zip
- 【路径规划】蜣螂算法栅格地图机器人最短路径规划【含Matlab仿真 2954期】.zip
- 【路径规划】人工蜂鸟算法栅格地图机器人最短路径规划【含Matlab仿真 2955期】.zip
- 【路径规划】人工大猩猩算法栅格地图机器人最短路径规划【含Matlab仿真 2927期】.zip
- 【路径规划】天鹰算法栅格地图机器人最短路径规划【含Matlab仿真 2928期】.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功