引導骨幹木偶莫代爾

Question

我試圖創建一個基於這篇文章的骨幹和提線木偶的對話：

http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/

我這裏有一個小提琴： http://jsfiddle.net/netroworx/ywKSG/

HTML：

<script type="text/template" id="edit-dialog"> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">×</button> 
    <h3 id="actionTitle">Create a New Action</h3> 
</div> 
<div class="modal-body"> 
    <input type="hidden" id="actionId" name="actionId" /> 
    <table> 
     <tbody> 
     <tr> 
      <td>Goal: </td> 
      <td> 
       <input type="text" id="goal" name="goal" > <input type="hidden" id="goalid" name="goalid" > 
       <a tabindex="-1" title="Show All Items" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-combobox-toggle ui-state-hover" 
       role="button" aria-disabled="false" > 
        <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text"></span> 
       </a> 
      </td> 
     </tr> 
     <tr> 
      <td>Action name: </td> 
      <td> 
       <input type="text" id="actionName" name="actionName"> 
      </td> 
     </tr> 
     <tr> 
      <td>Target date:</td> 
      <td> 
       <input type="text" id="actionTargetDate" name="actionTargetDate"/> 
      </td> 
     </tr> 
     <tr id="actionActualDateRow"> 
      <td>Actual date:</td> 
      <td> 
       <input type="text" id="actionActualDate" name="actionActualDate"/> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</div> 
<div class="modal-footer"> 
    <a href="#" class="btn" data-dismiss="modal">Close</a> 
    <a href='#' class="btn btn-primary" id="actionActionLabel">Create Action</a> 
</div> 

</script>    

<div id="modal"></div> 

<a href="#" id="showModal">Show Modal</a> 

Javascript：

var ActionEditView = Backbone.Marionette.ItemView.extend({ 
    template: "#edit-dialog" 
}); 

function showModal() { 
     var view = new ActionEditView(); 
     view.render(); 

     var $modalEl = $("#modal"); 
     $modalEl.html(view.el); 
     $modalEl.modal(); 
} 

$('#showModal').click(showModal); 

當我單擊顯示模式鏈接時，html窗格如預期的那樣變暗，並且對話框內容顯示在背景層上。

這是怎麼發生的？

Answer 1

你缺少的DIV + CSS類，應該作爲模態對話框：

<div id="modal" class="modal hide fade"></div>