HTML标记中的Bootstrap 3模态放置

Question

Bootstrap(docs)说"总是试图将模态的HTML代码放在文档的顶层位置,以避免影响模态外观和/或功能的其他组件."

这是否意味着将模态放在我<body>标签的最顶端？如果是这样,为什么？

Answer 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

Answer 2

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