BlockUI on Bootstrap Modal show?

Question

I'm having issues showing blocking the whole modal content before it gets shown to the user with BlockUI.

If I simply initiate BlockUI after clicking the button that triggers the modal, it does loads, but the loading message does not get rendered correctly on the page, it's being placed at the top left corner.

$(document).on('click', '#modal-btn', function()
{
    mApp.block('#modal .modal-content',
    {
        overlayColor: '#000000',
        type: 'loader',
        state: 'success',
        message: 'Loading...'
    });
}); 

On the other hand, if I'm triggering the BlockUI only after the modal has been shown, then there's like a 500ms-1second when the user can edit the fields.

$(document).on('shown.bs.modal', '#modal', function()
{
    app.block('#modal .modal-content',
    {
        overlayColor: '#000000',
        type: 'loader',
        state: 'success',
        message: 'Loading...'
    });
}); 

Is there any way to either:

A) Center BlockUI's loading message using the first block of code? B) Block the whole modal before it gets shown to the user somehow else, while everything (including the loading text) is being shown as it should do.