1. 홈
  2. 질의 응답
  3. 부트 스트랩 3 HTML 태그의 모달 배치

부트 스트랩 3 HTML 태그의 모달 배치

2014-05-19 7 views
7

부트 스트랩 (docs)은 "모달의 모양 및/또는 기능에 영향을주는 다른 구성 요소를 피하기 위해 항상 문서의 최상위 위치에 모달의 HTML 코드를 넣으려고합니다."라고 말합니다.부트 스트랩 3 HTML 태그의 모달 배치

내 <body> 태그 맨 위에 모달을 배치한다는 의미입니까? 그렇다면 왜?

출처

2014-05-19 cheshireoctopus

답변

25

'최상위 위치'이 꼭 첫 번째를 의미하는 것은 아니며 DOM 트리의 맨 위에 있어야 함을 의미합니다.

예 : div#modal가div#content 내부 때문에가

<body> 
    <div id="content"> 
    <div id="modal"></div> 
    </div> 
</body>

이 상기 DOM의 상단 아니다.

body 
+-> div#content 
+-> div#modal
: 그것은 DOM 트리의 상단에있어, div#modal 비록

<body> 
    <div id="content"> 
    <!-- Content goes here --> 
    </div> 
    <div id="modal"></div> 
</body>

페이지의 상단에되지 않습니다 :

body 
+-> div#content 
     +-> div#modal

또 다른 예 : 그래서 우리는이 DOM 트리를

출처

2014-05-19 16:17:12 MTCoster

+2

감사합니다. – Dominic

+0

예를 들어 주셔서 감사합니다. 제게 많은 도움이되었습니다. – cheshireoctopus

3

대부분 충돌을 피하기위한 것입니다. 모달을 트리거하는 요소 아래에 모달을 배치하면 닫기 버튼이 제대로 작동하지 않는 것을 알 수 있습니다. 이러한 갈등을 피하기 위해, MTCoster가 대답 한대로 HTML DOM tree 위에 올려 놓는 것이 좋습니다.

출처

2014-05-19 16:04:55 mohamedrias

+1

"HTML 맨 위에"는 막연합니다 ... 유효하지 않은 HTML 인 ''태그 외부에 넣는 것처럼 들립니다. 그것을 덜 모호하게하기 위해 명확히 한 다음, 저를 언급하십시오. 나는 -1을 제거 할 것입니다. –

+1

내 대답이 업데이트되었습니다. 알림을 보내 주셔서 감사합니다. – mohamedrias

관련 문제

 관련 문제