使用玉器时出现在背景下的引导模态答案

【问题标题】：Bootstrap modal appearing under background while using jade使用玉器时出现在背景下的引导模态
【发布时间】：2023-04-01 02:17:01
【问题描述】：

我是node.js和jade的新手，我在谷歌应用引擎中找到了一个使用twitter bootstrap的应用。

问题但是，当我将相同的 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>

我错过了什么吗？

【问题讨论】：

你是否正确导入了bootstrap js文件？

标签： twitter-bootstrap pug

【解决方案1】：

我认为您缺少 'modal.dialog' 和 'modal-content' 类作为内容包装器，如 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!

【讨论】：