js-jquery-SweetAlert2使用

Posted 2020-09-10 木子旭

一、下载安装

地址：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 === ‘[email protected]‘) {
          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
  })
})

View Code

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()
})

View Code

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()
        })
    })
  }
}])

View Code

7.自定义宽、高等

swal({
  title: ‘Sweet!‘,
  text: ‘Modal with a custom image.‘,
  imageUrl: ‘https://unsplash.it/400/200‘,
  imageWidth: 400,
  imageHeight: 200,
  animation: false
})

View Code

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‘
    )
  }
})

View Code

取消没有确认

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‘
  )
})

View Code