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

原始的甜蜜警报插件不受支持，我建议您使用SweetAlert2插件。

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

在SweetAlert2中有swal.showLoading()，所以你可以像显示加载模式一样简单：

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

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></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中带有微调器的甜蜜警报对话框

2 个答案: