js-jquery-SweetAlert2【一】使用

概述：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
  })
})

View Code