bootstrap modal loading content via remote url, wait for modal to fully load content until being shown

Question

i'm able to load content via a remote url into a bootstrap modal, but the problem is the modal window opens up, but the content is not loaded.

Once the content is loaded the body of the modal is updated and the height expands to fit the content of the modal.

However, i'd like to only display the modal once the content is fully loaded, and maybe display an animated gif while the modal is loading.

I've looked at the docs, but i didn't see anything there about maybe a callback once the modal is loaded. I was hoping to maybe keep the modal hidden until the callback was fired and show it. how can i do this?

Answer 1

I got it thanks to the above comments. I stored the remote urls for the anchor tags that trigger a popup using a data attribute ('data-href') with the anchors class name as 'popup-links' using the following javascript:

$jq191('.popup-links').on( 'click', function( e ){
    var remote= $jq191( this ).data( 'href' );
    $jq191('.modal-body').load( remote, function( e ){
        $jq191( '#myModal' ).modal( 'show' );
    });
});