Event that triggers once an element is made visible

Question

I have multiple bootbox dialog boxes in my project and I want all of them to appear at the center of the screen, I cannot individually go and calculate the height of each box and position it at the center when the modal shows. Is there a common way to do this. Is there a way to trigger an event when the bootbox is made visible, I tried 'DOMNodeInserted', but this gives recursive error also tried livequery but this did not work. Can anyone tell me how to trigger an event when a dialog box is made visible at a common point.

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);
        }
});

Regards,

Neha

Answer 1

try this code

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

DEMO

updated

align bootbox at center

.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