js-jquery-SweetAlert2【一】使用
2024-03-17 13:34:45
概述：SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素的支持，还增加了5种情景模式的模态对话框。
一、下载安装
地址：https://github.com/limonte/sweetalert2
二、页面引用
<script src="dist/sweetalert2.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert2.min.css">
当然还有jquery
三、示例
3.1、基础结构
<link rel="stylesheet" type="text/css" href="sweetalert2.css">
<script src="jquery.min.js"></script>
<script src="sweetalert2.min.js"></script>
<script>
window.onload=function(){
swal("Here's a message!");//以下代码主要修改这里
}
</script>
3.2、精简用法
1、标题【alert】-swal（string）
swal("Here's a message!")
2、标题和描述【alert】-swal（string,string）
swal("Title","des")
3.标题、描述、成功【alert】-swal（string,string,string）
swal("Good job!", "You clicked the button!", "success")
3.3、标准使用
swal({
title: 'Auto close alert!',
text: 'I will close in 2 seconds.',
type: 'success'
}).then(
function ([isConfirm]) {},
// handling the promise rejection
function (dismiss) {
// dismiss can be 'cancel', 'overlay',
// 'close', and 'timer'
}
)
4、输入框
swal({
title: 'Submit email to run ajax request',
input: 'email',
showCancelButton: true,
confirmButtonText: 'Submit',
showLoaderOnConfirm: true,
preConfirm: function (email) {
return new Promise(function (resolve, reject) {
setTimeout(function() {
if (email === 'taken@example.com') {
reject('This email is already taken.')
} else {
resolve()
}
}, 2000)
})
},
allowOutsideClick: false
}).then(function (email) {
swal({
type: 'success',
title: 'Ajax request finished!',
html: 'Submitted email: ' + email
})
})
5.模态进度输入
swal.setDefaults({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
animation: false,
progressSteps: ['1', '2', '3']
})
var steps = [
{
title: 'Question 1',
text: 'Chaining swal2 modals is easy'
},
'Question 2',
'Question 3'
]
swal.queue(steps).then(function (result) {
swal.resetDefaults()
swal({
title: 'All done!',
html:
'Your answers: <pre>' +
JSON.stringify(result) +
'</pre>',
confirmButtonText: 'Lovely!',
showCancelButton: false
})
}, function () {
swal.resetDefaults()
})
6.问题框ajax
swal.queue([{
title: 'Your public IP',
confirmButtonText: 'Show my public IP',
text:
'Your public IP will be received ' +
'via AJAX request',
showLoaderOnConfirm: true,
preConfirm: function () {
return new Promise(function (resolve) {
$.get('https://api.ipify.org?format=json')
.done(function (data) {
swal.insertQueueStep(data.ip)
resolve()
})
})
}
}])
7.自定义宽、高等
swal({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://unsplash.it/400/200',
imageWidth: 400,
imageHeight: 200,
animation: false
})
8.标准确认取消
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false
}).then(function () {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
}, function (dismiss) {
// dismiss can be 'cancel', 'overlay',
// 'close', and 'timer'
if (dismiss === 'cancel') {
swal(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
取消没有确认
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function () {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
})
最新文章
- xcode-git笔记
- URAL
- QMessageBox 弹出框上的按钮设置为中文
- pywinauto简单介绍
- 如何实现.so共享库文件
- 科讯CMS V9标签清单
- 推荐一本好书给即将走入工作的程序员and程序媴
- Hard Parse&amp;Soft Parse
- SAP GB01替代 程序：RGUGBR00
- naoting
- Python 回溯算法
- RabbitMQ集群出现过机器故障，网络异常等故障后，重启无法重新建立集群的终极解决方案
- 常见模块(七) re模块
- C++程序调用python3
- H - Repeats （重复最多子串的次数）
- springMVC返回json数据时date类型数据被转成long类型
- mui框架（二）
- bootstrap css-网格系统
- oracle中scott用户的创建
- apache camel 条件路由