Menu
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?
581
A 'top-level position' does not necessarily mean first, it means that it needs to be near the top of the DOM tree.
Examples:
<body>
<div id="content">
<div id="modal"></div>
</div>
</body>
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
Another Example:
<body>
<div id="content">
<!-- Content goes here -->
</div>
<div id="modal"></div>
</body>
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
It's mostly to avoid conflicts. When you place modals below the elements which trigger them you might have noticed that sometimes the close button will not work properly. In order to avoid those conflicts, its recommended to place it on top of HTML DOM tree as mentioned by MTCoster in his answer.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
