2 Modal show ordering for loading purpose - asp.net-mvc

Question

I'm writing a MVC project which using bootstrap. I create the button, and add event onclick function.
For the view, I have make 2 modal. The first modal id call "loadme" (just for loading message). The second modal is the result screen which contain table.
The loadme modal is simple as like
<div class="modal fade" id="loadMe" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<div class="loader"></div>
<div clas="loader-txt">
<p>Check out this slick bootstrap spinner modal. <br><br><small>We are addicted to Bootstrap... #love</small></p>
</div>
</div>
</div>
</div>
</div>
and the main result modal as below
<div class="modal fade" id="modalwnd2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Car Model Browse 2</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body no-padding">
<div style="width:100%; margin:0 auto;" id="CarSelectedList">
#Html.Partial("~/views/Home/_SubDemoTable2.cshtml", ViewData["CarRecords"])
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
At the tag, I have do as below
$('#cmdCustPopup3').on('click', function (e) {
e.preventDefault();
console.log('#loadMe show');
$("#loadMe").modal({
backdrop: "static", //remove ability to close modal with click
keyboard: false, //remove option to close with keyboard
show: true //Display loader!
});
var url = '#Url.Action("getCarList", "Home")';
$.post(url, { _partialViewName:'_SubDemoTable3'}, function (data) {
$('#CarSelectedList').html(data);
console.log('#loadMe need hide');
$("#loadMe").modal('hide');
console.log('#loadMe hide end, modalwnd2 show()');
$('#modalwnd2').modal('show');
},'html'
)
});
You will see , even I have added "$("#loadMe").modal('hide');", but the loadme modal is still screen. Can you advise what's wrong for that ?
Thank you

Answer 1

Do you added bootstrap.js in page? If not, try to include it and try again