Bootstrap modal не показан при первом вызове

Question

Я пытаюсь использовать bootstrap 3.0 для загрузки внешнего html-файла в модальный с помощью jQuery Ajax-загрузчика, однако он не отображается при первом вызове, а работает при последующих вызовах.

<a data-toggle="modal" data-target="#myModal" href="#myModal" id="myModal" aria-hidden="true">Department</a> 

<div class="contianer"> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
       </button> 
       <h4 class="modal-title"> 
        <img src="img/logo.png" width="150" alt="SmartAdmin"> 
       </h4> 
      </div> 
       <div class="modal-body no-padding"> 
       </div> 
     </div> 
    </div> 
</div> 
</div> 

<script type="text/javascript"> 
$('#myModal').click(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     type: "GET", 
     url: "?AId=DEPT_ADDUPDATE", 
     data: { }, 
     success: function(data){ 
      $('.modal-body').html(data); 
     } 
    }); 
}); 
</script> 

Answer 1

Просто добавьте:

success: function(data){ 
     $('.modal-body').html(data); 
     $('#myModal').modal("show"); 
    }