Question

我在关闭模态框时添加了一些基本动画，以便缩小到一个元素：

$(function(){

    var $modal = $('.modal');
    $modal.on('hide', function () {

        if (!$modal.isAnimating) {

         // $('.modal-backdrop.in').fadeTo(250, 0);        // fade out backdrop

            var $target = $('#zoomout-target');
            var pos = $target.offset();
            pos.top  -= $(window).scrollTop();
            pos.left -= $(window).scrollLeft();

            $modal.css({top: pos.top, left: pos.left, transform: 'scale(0.1, 0.1)', opacity: 0});

            $modal.isAnimating = true;
            setTimeout(function(){
                $modal.modal('hide');
                $modal.isAnimating = false;
            }, 750);

            return false;
        }

        $modal.css({top: '', left: '', transform: '', opacity: ''});
    });
});

问题是背景“隐藏”了模态框缩小的目标元素。

所以我添加了$('.modal-backdrop.in').fadeTo(250, 0);上面的注释行，它很好地淡化了背景，但看起来我错过了一些东西，因为页面冻结了。

看起来背景仍然存在，捕获所有鼠标事件等，即使是透明的。因此背景不可见，但使页面无法使用。

如何摆脱fadeTo动画结束时的背景？

编辑：

我注意到问题出现在.modal-backdrop和.modal-scrollable叠加层上，所以这个代码片段而非攻击性片段解决了这个问题，但是必须有一个更清洁的解决方案IMO：

$('.modal-backdrop.in').fadeOut(600, function(){
    $('body').removeClass('modal-open');
    $('.modal-backdrop').hide();
    $('.modal-scrollable').hide();
});     // fade out backdrop

我正在使用Bootstrap 2.3.2和Bootstrap Modal 2.2.5

TIA

Bootstrap Modal淡出动画

编辑：

0 个答案: