2012-05-20 3 views
1

오작동 : 나는 그것에 기대와 정확히 일치부트 스트랩 조동사 나는 이미 존재하는 페이지에 부트 스트랩 모달를 추가하기 위해 노력하고있어 나는 다음과 같은 문제로 실행 해요

모달 디스플레이, 장소에 콘텐츠를 찾고 아주 아름답지만 두 가지 문제가 있습니다. class="modal" 만 지정하면 페이지가로드되어 닫히지 않을 때 기본적으로 모달이 표시됩니다. class="modal hide"을 포함하면 모달은 페이지로드시 표시되지 않지만 해당 버튼을 클릭하면 닫히지 않습니다.

부트 스트랩 사이트의 modals sample code에서 큰 차이를 내지 않을 것입니다. 여기

모달 실행 해야하는 버튼의 :

<a class="btn" data-toggle="modal" href="#testmodal" >About</a> 

을 그리고 여기 모달 자체입니다 :

<div class="modal hide fade in" id="testmodal"> 
     <div class="modal-header"> 
      <button class="close" data-dismiss="modal">x</button> 
      <h3>Modal Header</h3> 
     </div> 
     <div class="modal-body"> 
      <p>body</p> 
     </div> 
     <div class="modal-footer"> 
      <a href="#" class="btn">Close</a> 
     </div> 
    </div> 

그리고 레코드에 대한

, 그래 내가 부트 스트랩-modal.js을 포함하는 것을 잊지 않았다 and bootstrap-transition.js

+1

jquery와 부트 스트랩이 올바르게로드 되었습니까? 콘솔 (방화 쇠 또는 크롬 콘솔)을 열고 오류가 없는지 확인하십시오. – geoffreydv

+0

@geoffreydv 그 대답을 받아 들여야합니다. 어떤 이유로 Bootstrap의 다운로드 페이지에서 모듈을 명시 적으로 선택 했음에도 불구하고 실제로는 zip에 없었습니다. 나는 GitHub에서 모든 것을 다운로드하고 파일을 수동으로 놓아야 만했다. 그 이유는 확실하지 않았다 ... 어떤 경우 이건 문제였다. 고마워! ~ –

답변

1

문제가 해결되면 기쁘게 생각합니다.

또한 사용자 정의없이 기본 부트 스트랩 기능을 원하면 기본 페이지의 큰 다운로드 버튼을 사용하십시오. 이 zip 파일에는 모든 플러그인 (예 : 모달 대화 상자 등)이 포함 된 기본 bootstrap.min.js 파일이 들어 있습니다. 당신이 당신의 페이지가 더 적은 요청을하고 더 빨리로드해야하는 모든 별도의 자바 스크립트 파일 대신 그 하나를 사용한다면.

0

가까운 링크는 다음과 같아야합니다.

<a class="close" data-dismiss="modal">×</a> 

data-dismiss는 맞춤 HTML5 데이터 속성이므로 여기에서 모달 창을 닫는 데 사용됩니다.