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!