Bootstrap（docs）说＆＃34;总是尝试将模态的HTML代码放在文档的顶层位置，以避免影响模态的其他组件外观和/或功能。＆＃34;
这是否意味着将模态放在<body>标签的最顶部？如果是这样，为什么？
答案 0 :(得分：31)
A＆＃39; 顶级职位＆＃39;并不一定意味着首先，它意味着它需要靠近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
答案 1 :(得分：5)
主要是为了避免冲突。当您将模态放置在触发它们的元素下方时，您可能已经注意到有时关闭按钮将无法正常工作。为了避免这些冲突，建议将其放在HTML DOM tree之上，正如MTCoster在他的回答中提到的那样。