Bootstrap modal не активирован

Question

Я хочу создать кнопку Navbar, которая вызывает bootstrap modal, который содержит форму. Я нашел суть в https://gist.github.com/havvg/3226804, и я пытаюсь адаптировать его к моим потребностям. Я не заполнял заполняющую часть сценария ajax, но я заметил, что модальность не активируется. Я хочу нажать кнопку на навигационной панели и отобразить модальную форму. Что я делаю не так?

<div class="hide fade modal" id="rating-modal"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">button</button> 
     <h2>Your Review</h2> 

    </div> 
    <div class="modal-body"> 
     <!-- The async form to send and replace the modals content with its response --> 
     <form class="form-horizontal well" id="modalForm" data-async data-target="#rating-modal" action="AjaxUpdate/modal" method="POST"> 
      <fieldset> 
       <!-- Form Name --> 
       <legend>modalForm</legend <!-- Text input--> 
       <div class="control-group"> 
        <label class="control-label" for="old">Old password</label> 
        <div class="controls"> 
         <input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge"> 
         <p class="help-block">help</p> 
        </div> 
       </div> 
       <!-- Text input--> 
       <div class="control-group"> 
        <label class="control-label" for="new">New password</label> 
        <div class="controls"> 
         <input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge"> 
         <p class="help-block">help</p> 
        </div> 
       </div> 
      </fieldset> 
     </form> 
    </div> 
    <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Cancel</a> 

    </div> 
</div> 
<script src='js/jquery.js'></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 

    // $('form[data-async]').live('submit', function(event) { 
    $('#modalForm').on('submit', function (event) { 
     var $form = $(this); 
     var $target = $($form.attr('data-target')); 

     $.ajax({ 
      type: $form.attr('method'), 
      url: $form.attr('action'), 
      data: $form.serialize(), 

      success: function (data, status) { 
       $target.html(data); 
      } 
     }); 

     event.preventDefault(); 
    }); 

}); 
</script>  

Answer 1

Попробуйте удалить класс hide из вашего DIV:
<div class="fade modal" id="rating-modal">