Question

我正在使用bootstrap模态对话框。我需要更改它，以便模式快速显示而不需要任何动画。但当它关闭时，它应该缓慢消失。所以，动画是可见的。

下面是弹出窗口的html代码。

<div class="modal" id="pleaseWaitPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <p><i class="fa fa-spinner fa-5x fa-spin fa-pulse" aria-hidden="true"></i></p>
                <p class="light-gray-pop"> Processing Your Request.</p>
                <h3> PLEASE WAIT</h3>
            </div>
        </div>
    </div>
</div>

及以下是用于显示模态对话框的js。

$('#pleaseWaitPopup').modal({
            backdrop: 'static',
            keyboard: false
});

Answer 1

您可以尝试为引导模式添加/删除class="fade"。在显示模态之前删除淡入淡出动画，然后在显示模态后将其添加回来：

// Remove the fade animation for the modal before the modal is shown
$('#pleaseWaitPopup').on('show.bs.modal', function () {
    $(this).removeClass('fade');
})

// Add the fade animation for the modal once the modal is shown
$('#pleaseWaitPopup').on('shown.bs.modal', function () {
    $(this).addClass('fade');
})

$('#pleaseWaitPopup').modal({
            backdrop: 'static',
            keyboard: false
});

这是一个bootply
http://www.bootply.com/USl2vMXKCj

我添加了临时关闭和打开按钮，以便能够切换模态，但可以随意删除它们/

如何更改bootstrap模式对话框，使其在显示时没有动画但缓慢淡出？

1 个答案: