首页 > 代码库 > js-jquery-SweetAlert2【一】使用
js-jquery-SweetAlert2【一】使用
一、下载安装
地址：https://github.com/limonte/sweetalert2
二、页面引用
<script src="http://www.mamicode.com/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/dist/sweetalert2.min.css">
当然还有jquery
三、示例
3.1、基础结构
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/sweetalert2.css"><script src="http://www.mamicode.com/jquery.min.js"></script> <script src="http://www.mamicode.com/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‘ )})
js-jquery-SweetAlert2【一】使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。