将 sweetalert2 与 bootstrap 4 一起使用

Question

我正在使用 sweetAlert2，我正在尝试使用 bootstrap 4 来设置按钮样式，设置属性：

buttonsStyling: false,
confirmButtonClass: 'btn btn-primary btn-lg',
cancelButtonClass: 'btn btn-lg'

它有效，但是当我在上面设置这些属性时，showLoaderOnConfirm 选项以非常难看的样式显示。

您可以查看以下示例：

重现步骤：

输入有效的电子邮件；
按提交;
查看第一个加载器（样式）（使用 bs4，第二个使用 swal2 的默认样式）。

$(function() {
  $('#button').click(() => {
    swal({
      title: 'Submit email to run ajax request',
      input: 'email',
      showCancelButton: true,
      confirmButtonText: 'Submit',
      showLoaderOnConfirm: true,
      buttonsStyling: false,
      confirmButtonClass: 'btn btn-primary btn-lg',
      cancelButtonClass: 'btn btn-lg',
      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
      })
    }).catch(swal.noop)
  });

  $('#button1').click(() => {
    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
      })
    }).catch(swal.noop)
  });
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.4.2/sweetalert2.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.4.2/sweetalert2.min.css" />
</head>

<body>
  <button id="button">Show (Bootstrap)</button>
  <hr />
  <button id="button1">Show (w/o bootstrap)</button>
</body>

</html>

问题是：如何让加载程序使用默认样式（使用 bs4）？或者可以自定义 showLoaderOnConfirm 选项的样式...

Answer 1

来自官方网站的现场演示：https://sweetalert2.github.io/recipe-gallery/bootstrap.html

Swal.fire({
  title: 'SweetAlert2 + Bootstrap 4',
  input: 'text',
  buttonsStyling: false,
  showCancelButton: true,
  customClass: {
    confirmButton: 'btn btn-primary btn-lg',
    cancelButton: 'btn btn-danger btn-lg',
    loader: 'custom-loader'
  },
  loaderHtml: '<div class="spinner-border text-primary"></div>',
  preConfirm: () => {
    Swal.showLoading()
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true)
      }, 5000)
    })
  }
})

.btn {
  margin: 0 6px;
}

.custom-loader {
  animation: none !important;
  border-width: 0 !important;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.css">

Answer 2

如果模式没有显示，只需添加到您的 CSS:

<style>
    .swal2-container.fade {
       opacity: 1
    }
</style>

将 sweetalert2 与 bootstrap 4 一起使用

Using sweetalert2 with bootstrap 4

javascript

css

twitter-bootstrap

sweetalert

sweetalert2