软件简介

SweetAlert2 是一个漂亮、响应式、可定制、易用的(WAI-ARIA) JavaScript 弹窗(弹出框)。无任何依赖。


安装

npm install --save sweetalert2

或:

bower install --save sweetalert2

也可从 CDN 直接下载:cdnjs.com/limonte-sweetalert2

使用

<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>

或:

// ES6 Modules or TypeScript
import swal from 'sweetalert2'

// CommonJS
const swal = require('sweetalert2')

注意:支持 TypeScript ,因此不必安装第三方声明文件。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (16)

加载中
这款弹窗的动画效果不错,可以学习借鉴下。 原生js开发的pc版弹窗插件|dialog对话框|msg信息框,全面支持拖拽、缩放、最大化,功能效果还是很不错的。 https://www.cnblogs.com/xiaoyan2017/p/10227798.html
2019/01/08 11:23
回复
举报
css文件在哪下载呢
2018/03/30 08:47
回复
举报
应该早就收录了吧?这货我都用了好久了
2017/08/15 08:42
回复
举报
兼容性不如第1版的,我用回第1版了
2017/08/14 21:52
回复
举报
看它的文档有说, animation 设为 false 可以禁用抖动动画
2017/08/14 14:01
回复
举报
建议去掉抖动
2017/08/14 13:29
回复
举报
打分: 还行
如果能去掉抖动就好了。。
2017/08/14 12:01
回复
举报
打分: 力荐
中文版 http://mishengqiang.com/sweetalert2/
2017/08/14 11:53
回复
举报
听说这货慢,比较占资源,不知真假。
2017/08/14 11:20
回复
举报
打分: 推荐
一直在使用layer,看了demo,貌似不错,之后项目可以尝试下
2017/08/14 11:11
回复
举报
更多评论
暂无内容
发表了博客
2019/11/28 17:19

sweetalert2使用教程

背景: 项目的开发中经常会遇到弹窗的问题,但是我们用到的弹窗都特别low,而且网上找了一下,发现easy-ui以及layer对应的弹窗都不是我想要的,后来发现sweetalert,发现评论还不错,所以个人尝试一下,并记录一下使用过程,便于他人借鉴。 SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类,功能...

0
0
发表了博客
2018/07/12 00:01

sweetalert2 全面替代 alert ,从 sweetalert2 弹出 text 到 弹出 Dom 以及模态框和取消 sweetalert2 的 OK 按钮

1. 简易基本版 sweetalert 涵盖日常基本的弹出及对话框 2. 升级版本 sweetalert2 满足常见开发工作中的各种要求 3 取消 OK 按钮, 只需要设置 showConfirmButton: false, Swal({ title: 'Oops...', text: 'Something went wrong!', showConfirmButton: false, })...

0
0
发表了博客
2018/01/16 02:02

SweetAlert2 弹窗

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SweetAlert2</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css--> <link rel="stylesheet" href="resource/css/mui.min.css"> <link rel="sty...

0
0
发表了博客
2019/09/10 16:29

SweetAlert2模态窗的使用

SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类,功能非常强大。 SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种情景模式的模态对话框。 1. 模态窗的使用演示: //提示信息 s...

0
0
发表了博客
2019/07/01 19:32

用过的前端插件合集

用过的前端插件合集 FontAwesome字体 Font Awesome 详细用法参见上述站点的Examples。 SweetAlert系列 SweetAlert SweetAlert2 SweetAlert 到 SweetAlert2 升级指南 SweetAlert2快速部署 https://pan.baidu.com/s/1BFXctrsgE_26HJU3XT1lcg 示例: 基本使用: swal("标题","内容","success); 使用SweetAlert在Ajax提交成功(done)或失败(error)时分别提示不用的内容。 这是更新之前版本的写法 function deleteRecord(recordID...

0
0
发表了博客
2018/03/02 14:44

sweetAlert1 设置弹窗宽度,及使用自定义样式

sweetAlert1不像sweetAlert2那样可以通过width属性来配置弹窗的宽度。但是可以通过customClass属性来配置自定义样式 1、如何使用自定义样式 swal({ title: "漂亮!", text: "这是自定义图标。", imageUrl: "images/thumbs-up.jpg" , customClass: "sweetAlert sweetAlert2" }); 其中的sweetAlert和sweetAlert2就是在CSS样式中定义的样式类,多个类中间使用空格隔开 2、使用自定义样式设置弹窗的宽度 .s...

0
0
发表了博客
2019/06/08 00:35

Vue实战之插件 sweetalert 的使用

安装 npm install sweetalert2@7.15.1 --save 封装 sweetalert import swal from 'sweetalert2' export default { install: (Vue) => { // sweetalert2 的设置默认配置的方法 swal.setDefaults({ type: 'warning', showCancelButton: true, confirmButtonColor: 'rgb(140,212,245)', cancelButtonColor: 'rgb(193,193,193)' }) // 添加全局方法 Vue.swal = swal // 添加实例方法 Vue.prototype.$swal = swal } } /* Vue.js 的插...

0
0
发表了博客
2019/08/01 22:24

常用的前端开发插件与工具合集

常用的前端开发插件与工具合集 Font Awesome字体图标插件 Font Awesome的矢量图标,将使您的网站在视网膜级的高分屏上大放异彩。 完美兼容其它框架 尽管是为Bootstrap设计,但Font Awesome同样能与其它框架完美协同运作。 Font Awesome https://fontawesome.com/ SweetAlert系列(数据Ajax)插件 SweetAlert 是 JavaScript 原生 'alert' 弹窗的完美替代品... SweetAlert 让弹窗更容易、更美观。 SweetAlert SweetAlert2 SweetAler...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
16 评论
167 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部