HTML标记中的Bootstrap 3模态放置 [英] Bootstrap 3 Modal Placement in HTML Markup
问题描述
Bootstrap（ docs ）说总是试图将模态的HTML代码放在你的顶级位置文档以避免影响模态外观和/或功能的其他组件。
The Bootstrap (docs) say to "always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality."
这是否意味着将模态置于我的的最顶层<正文> 代码？如果是这样，为什么？
Does this mean to place modals at the very top of my <body> tags? If so, why?
推荐答案
'顶级职位'并不一定意味着第一，这意味着它需要靠近DOM树的顶部。
A 'top-level position' does not necessarily mean first, it means that it needs to be near the top of the DOM tree.
示例：
<body>
<div id="content">
<div id="modal"></div>
</div>
</body>
这不在DOM的顶部，因为 div＃modal 里面 <$ em $ c> div #content 。所以我们有这个DOM树：
This is not at the top of the DOM, because div#modal is inside div#content. So we have this DOM tree:
body
+-> div#content
+-> div#modal
另一个例子：
<body>
<div id="content">
<!-- Content goes here -->
</div>
<div id="modal"></div>
</body>
虽然 div＃modal 不在在页面顶部，它位于DOM树的顶部：
Although div#modal is not at the top of the page, it's at the top of the DOM tree:
body
+-> div#content
+-> div#modal
这篇关于HTML标记中的Bootstrap 3模态放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
