AngularJs 中带有微调器的甜蜜警报对话框

Question

我正在尝试在 sweet alert 对话框中显示一个类似于 Bootstrap 模态对话框 (http://jsfiddle.net/D6rD6/5/)

的微调器

我能想到的最接近的是这样的：

SweetAlert.swal({
title: '<small>Import errors occurred !</small>',
text: '<i class="fa fa-spinner" aria-hidden="true"></i>',
html: true,
customClass: 'manual-upload-errors-swal-width'
});

如果这不可能，那么最接近和最好的解决方案是什么？

Answer 1

原版sweet alert插件不支持，建议使用SweetAlert2插件。

迁移很简单，这里是迁移指南：Migration from SweetAlert to SweetAlert2

在 SweetAlert2 中有 swal.showLoading()，因此您可以像这样简单地显示加载模式：

Swal.fire('Please wait')
Swal.showLoading()

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Answer 2

此代码可以很好地显示加载微调器。

    const showLoading = function() {
        Swal.fire({
            title: 'Please Wait',
            allowEscapeKey: false,
            allowOutsideClick: false,
            background: '#19191a',
            showConfirmButton: false,
            onOpen: ()=>{
                Swal.showLoading();
            }

            // timer: 3000,
            // timerProgressBar: true
        });
    };
    
    showLoading();

<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial- scale=1.0"/>

    <!-- Compiled and minified JavaScript -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@3" rel="stylesheet">

</head>

</html>

AngularJs 中带有微调器的甜蜜警报对话框

Sweet alert dialog with spinner in AngularJs

javascript

twitter-bootstrap

angularjs

bootstrap-modal

sweetalert