Hiding bootstrap modal from jQuery doesn't work the first time

Question

I've been having some problems with a JQuery code. I'm trying to make a "dynamic" website, so every time you click on a link ('a' elements have a 'link' attribute), my code takes the 'link' attribute and passes it to jQuery's load() function. Thing is, I wanted to let the user know the content is loading, so I thought I could show a modal before start loading, and hiding it when finished, but it doesn't work. The first time I click on a link, modal stays there, and doesn't go away. However, from second time on, I click any link and everything works perfectly.

Why does it only fail to close the first time?

$(document).on("click", "[link]", function() {
    $("#cargando").modal('show');
    $('#contenido').load($(this).attr('link'), function() {
        $('#cargando').modal('hide');
        $('.modal-backdrop').hide();
    });
});

Extra info: this code, and the modal HTML are together in a file named dyn.html, which is included at the end of the rest of the pages.

EDIT, modal code:

<div class="modal modal-static fade" id="cargando">
<div class="modal-dialog"><div class="modal-content">
<div class="modal-body"><div class="text-center">
<h4>Cargando...</h4>
</div></div></div></div></div>

EDIT, it works with:

$(document).on("click", "[link]", function() {
$('#cargando').modal('show');
$('#contenido').load($(this).attr('link'), function() {
$('#cargando').hide();
$('.modal').hide();
$('.modal-backdrop').hide();
});
});

It's messy but it's the first thing that works.

Answer 1

$('.modal').hide();

replace this code by applying timeout function. So it would be like.

setTimeout(function(){
  $('.modal').hide();
},100);

Here 100 is the time out duration.