Bootstrap模式在使用玉石時出現在背景下

Question

我是node.js和jade的開始，我在谷歌應用程序引擎中使用twitter引導程序獲得了一個應用程序。

問題雖然我將相同的html轉換爲jade，但模式並不像它應該那樣運行，而是背景來了。我刪除了淡入淡出班，但無濟於事。下面是玉

#newWordModal.modal.hide 
    .modal-header 
     button.close(type='button', data-dismiss='modal') x 
     h3 Add A Word 
    .modal-body 
     #create-word 
     input#new-word-name(type='text', placeholder='Type in a word name') 
     input#new-word-def(type='text', placeholder='Define it....') 
    .modal-footer 
     a.btn(href='#', data-dismiss='modal') Close 
     a#add-word.btn.btn-primary(href='#', data-dismiss='modal') Add Word! 

HTML中的相同代碼這個

<div class="modal hide fade" id="newWordModal"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">×</button> 
    <h3>Add A Word</h3> 
    </div> 
    <div class="modal-body"> 
    <div id="create-word"> 
    <input type="text" id="new-word-name" placeholder="Type in a word name" /> 
    <input type="text" id="new-word-def" placeholder="Define it...." /> 
    </div> 
</div> 
<div class="modal-footer"> 
    <a href="#" class="btn" data-dismiss="modal">Close</a> 
    <a href="#" class="btn btn-primary" data-dismiss="modal" id="add-word">Add Word!</a> 
</div> 
</div> 

我錯過了一些東西在這裏？

Answer 1

我認爲你缺少「modal.dialog」和「模態內容」類爲內容的包裝，如所描述here

那麼你的代碼應該是這樣的

#playlistloadmodal.modal.fade 
     .modal-dialog 
      .modal-content 
       .modal-header 
        button.close(type='button', data-dismiss='modal') x 
       .modal-body 
        #create-word 
         input#new-word-name(type='text', placeholder='Type in a word name') 
         input#new-word-def(type='text', placeholder='Define it....') 
       .modal-footer 
        a.btn(href='#', data-dismiss='modal') Close 
        a#add-word.btn.btn-primary(href='#', data-dismiss='modal') Add Word!