元素可见后触发的事件答案

【问题标题】：Event that triggers once an element is made visible元素可见后触发的事件
【发布时间】：2017-05-04 05:36:58
【问题描述】：

我的项目中有多个引导框对话框，我希望它们都出现在屏幕的中心，我不能单独计算每个框的高度并将其定位在模态显示时的中心。有没有一种通用的方法来做到这一点。有没有办法在引导箱可见时触发事件，我尝试了“DOMNodeInserted”，但这给出了递归错误，也尝试了 livequery，但这不起作用。谁能告诉我当对话框在公共点可见时如何触发事件。

jQuery(document).on('DOMNodeInserted', function(e) {
        if(jQuery(e.target).hasClass('modal')) {
            setTimeout(function(){
                if(jQuery(e.target).height()/2 > 1){
                    var topPos = ((jQuery(window).height() - 30)/2) - jQuery(e.target).find('.modal-dialog').height()/2;
                    jQuery('.modal-content').css('top', topPos);
                }
            },200);
        }
});

问候，

内哈

【问题讨论】：

请提供您尝试过的代码示例
我已经尝试过上面的代码，这会将弹出窗口置于中心位置，但会出现“递归过多”错误。

标签： javascript jquery html css bootbox

【解决方案1】：

试试这个代码

.on("shown.bs.modal", function(e) {
   alert("bootbox is visible");
});

DEMO

更新

在中心对齐引导箱

.on("shown.bs.modal", function(e) {
$('.modal-content').css({
    'transition':'margin-top 1s linear',
  'margin-top': function (){
        var w = $( window ).height();
        var b = $(".modal-dialog").height();
        var h = (w-b)/2;
        return h+"px";
    }
  });
});

DEMO

【讨论】：

非常感谢，这很好用。但是有一个问题，这段代码只有在盒子可见并且跳转到看起来很奇怪的中心之后才执行。有什么解决方案。我试过 $(this).animate({'top': '-=30px'},'slow');也可以，但这不能正常工作。
这个演示也有同样的问题。框只是跳到中心。
有什么办法可以避免这种突然的跳跃。
谢谢，就是想问问能不能让过渡更顺畅。