javascript - Modal only triggered after ajax request -

i have 2 questions code. first why modal not shown before alert? second how can delay modal, because popup fast can't see nothing in modal.

    $('#mymodal').modal('hide');     $(document).ajaxstart(function() {         $('#mymodal').modal('show');     }).ajaxstop(function() {         $('#mymodal').modal('hide');         //$('#mymodal').delay(5000).modal('hide'); not work      });       $(".generate_report").click(function(event) {         event.preventdefault();          $.post("xls.php", $(".form_report").serialize(), function() {         }).done(function(data) {             alert("should executed after modal");         });     }); 

demo

you can achieve same code:

$(".generate_report").click(function (event) {     event.preventdefault();     $('#mymodal').modal('show');         settimeout(function(){              $.post("xls.php", $(".form_report").serialize(),function(data){             $('#mymodal').modal('hide');             alert("after modal");          })      }, 2000); }); 

and remove code

$(document).ajaxstart(function() {     $('#mymodal').modal('show'); }).ajaxstop(function() {     $('#mymodal').modal('hide');     //$('#mymodal').delay(5000).modal('hide'); not work  });