특정 div에만 모든 부트 스트랩 스타일을 적용하면 모달이 작동하지 않습니다.

Question

그래서 사용자 지정 SharePoint 응용 프로그램 페이지에서 부트 스트랩 스타일링 (BTW는 최고)을 사용하려고합니다. 이렇게하기 위해 bootstrap.less 파일을 수정하여 모든 선택자 앞에 내가 선택한 ID를 접두어로 붙였습니다. 기본적으로 나는이 게시물에 대한 제안을 따랐다 : Prefixing all selectors for twitter bootstrap in less.

이것은 훌륭하게 작동했습니다 ... 부트 스트랩 스타일은 선택한 ID로 컨테이너 div에만 적용되었습니다. 그러나이 작업을 수행 할 때 모달이 작동을 멈춘 것으로 나타났습니다. 필자는 원래 bootstrap.css 파일로 다시 전환하여 테스트했습니다. 기본 bootstrap.css 파일을 사용할 수없는 이유는 페이지 나머지 부분에서 SharePoint 스타일링이 일부 엉망이되기 때문입니다. 모든 부트 스트랩 스타일 요소에서 접두사가 붙은 선택기를 사용하면서 모달 작업을하려면 어떻게해야합니까?

Answer 1

알아 냈어. bootstrap-modal.js 파일에서 backdrop 속성의 콜백은 기본적으로 문서 본문에 추가됩니다. 모든 부트 스트랩 스타일을 적용하기 위해 사용자 정의 접두어를 추가 했으므로이 클래스를 사용하여 상위 div에 추가해야합니다. 수정은 다음과 같습니다.

원래 부트 스트랩-modal.js : (내 사용자 정의 선택은 '.bootstrap'이다)

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') 
    .appendTo(document.body) 

내 수정 :

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') 
    .appendTo($('.bootstrap')[0])