HTML 标记中的 Bootstrap 3 模态放置答案

【问题标题】：Bootstrap 3 Modal Placement in HTML MarkupHTML 标记中的 Bootstrap 3 模态放置
【发布时间】：2014-05-20 08:07:20
【问题描述】：

Bootstrap (docs) 说“始终尝试将模态的 HTML 代码放在文档中的顶级位置，以避免其他组件影响模态的外观和/或功能。”

这是否意味着将模态框放在我的<body> 标签的最顶部？如果有，为什么？

【问题讨论】：

【解决方案1】：

一个'顶级位置'并不一定意味着首先，它意味着它需要靠近DOM树的顶部。

示例：

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

这不在 DOM 的顶部，因为div#modal 在内部 div#content。所以我们有了这个 DOM 树：

body
 +-> div#content
      +-> div#modal

另一个例子：

<body>
  <div id="content">
    <!-- Content goes here -->
  </div>
  <div id="modal"></div>
</body>

虽然div#modal不在页面顶部，但它在DOM树的顶部：

body
 +-> div#content
 +-> div#modal

【讨论】：

【解决方案2】：

主要是为了避免冲突。当您将模态框放置在触发它们的元素下方时，您可能已经注意到有时关闭按钮无法正常工作。为了避免这些冲突，建议将其放在HTML DOM tree 之上，正如 MTCoster 在他的回答中提到的那样。

【讨论】：

"on top of HTML" 含糊不清……这听起来像是您将其放在 <html> 标记之外，这将是无效的 HTML。澄清一下以减少歧义，然后评论我，我将删除我的 -1。
更新了我的答案。感谢通知