Geek Answers Handbook

Bootstrap 3 Modal HTML Layout

Bootstrap ( docs ) says: "Always try to put the modal HTML code at the top level position in your document to avoid other components that affect the modal appearance and / or functionality."

Does this mean that the modality is at the very top of the <body> tags? If so, why?

+7
html5 twitter-bootstrap twitter-bootstrap-3
source share
2 answers

"Top-level position" does not necessarily mean first, it means that it should be near the top of the DOM tree.

<strong> 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 the div#modal not at the top of the page, it is at the top of the DOM tree:

 body +-> div#content +-> div#modal
+25
source share

Mainly to avoid conflicts. When you place modals under the elements that trigger them, you may notice that sometimes the close button does not work properly. To avoid these conflicts, it is recommended that you put it on top of the HTML DOM tree , as MTCoster mentioned in his answer.

+3
source share

More articles:


All Articles