.active类在Modal中的Bootstrap进度条上未激活

Question

我的视图中有一个包含进度条的模态。问题是，虽然我将活动类添加到进度条中以进行动画处理，但当我在Chrome中检查元素时，我可以看到.active类未应用。

这是我的模态：

<div class="modal fade" id="pleaseWaitDialog" role="dialog"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Processing...</h4>
                <p>This may take a while, depending on your connection.</p>
            </div>
            <div class="modal-body">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar"
                         aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
                        Importing Patients
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我检查元素时模态的图像。

为什么会这样？

Answer 1

基本上，您使用的活动类是动态设置进度条的动画。 如果您使用的某些类编写.active类，则可能会发生这种情况。您可以通过以嵌套形式使用此类来测试此问题，或逐个使用它。 否则，您可以使用java-script动态处理它来处理它。 试试这个：

<div class="progress progress-striped active">
    <div class="progress-bar" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

Answer 2

在“显示”模型行之前单独添加您的活动类

$(".progress-bar").addClass('Active');
$("PleaseWaitDialog").model('show');

有一些代码正在删除此类。