부트 스트랩 - 모달

작동하지 않습니다 나는 단지 모달 플러그인의 최신 JQuery와, 부트 스트랩 JS 및 CSS를 추가 한이부트 스트랩 - 모달

<body> 
<div class="modal fade" id="pageopen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
        x 
       </button> 
       <h4 class="modal-title" id="myModalLabel"> 
        This Modal title 
       </h4> 
      </div> 
      <div class="modal-body"> 
       Add some text here 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary"> Submit changes</button> 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal --> 
</div> 

<button onclick="showModal('http://www.google.co.id/')">Show Modal</button> 

</body>

같은 설정 모달 되세요.
내가 가진 문제는 모달 배경이 보여 주지만 모달 헤더 본문 등이 나타나지 않는다는 것입니다.

My Code

솔루션을 제공하십시오가,

출처

2014-08-27 godheaper

단추 연결 방법 모달? Pls가 http://getbootstrap.com/javascript/#modals로 이동하여 '

자바 스크립트 코드가 잘못, :

대신이의 버튼의 ID를 설정하고 JQuery와의 .click 기능을 사용

$('#pageopen').modal({ 
     show: true 
});

외부 페이지를로드하려는 경우 여기에서 URL을 설정할 수 있습니다.

$('#pageopen').modal({ 
    show: true, 
    remote: 'http://www.example.com' 
});

"onClick"대신 jQuery click 함수를 사용하는 것이 좋습니다.

출처

2014-08-27 08:40:52 derdida

아, 고마워. 이것은 내가 필요한 것입니다. BTW, 부트 스트랩에 2 개의 개별 CSS를로드했기 때문에 내 페이지의 문제가 있습니다. 따라서 모달 클래스가 서로 겹쳐서 모달 스타일을 망칠 수 있습니다. 어쨌든 해결책 주셔서 감사합니다. – godheaper

귀하의 문제가 showModal 기능이 onclick에 의해 발견되지 않는 것입니다 감사합니다, 영원히 당신의 HTML에서 onclick을 사용을 중지하십시오. 그것은 결코 좋은 연습이 아니 었습니다. 사용해야 부트 스트랩 3 모달를 엽니 다

<button id="showModal">Show Modal</button> 

$("#showModal").click(function(){ 
    $('#pageopen').modal(); 
});

Check JSFiddle Demo

출처

2014-08-27 08:38:43 Moshtaf

입니다. 솔루션을 제공해 주셔서 감사합니다. 나는 html 이벤트를 다음에 사용하지 않는 것을 기억할 것이다. – godheaper

하하, 괜찮습니다. 동일한 부트 스트랩 구성 요소에 대해 js와 css를 구분하여 서로 오버랩합니다. 부트 스트랩

팁 :
항상 부하 하나 개의 js 파일과 부트 스트랩에 대한 하나 개의 CSS 파일.
모든 패키지 (예 : 모달, 전환 및 회전 목마) 대신 부트 스트랩의 일부만을 원하는 경우 나와 getbootstrap에서 하나의 js와 css로 만듭니다.

출처

2014-08-27 08:44:34 godheaper

부트 스트랩 - 모달

답변

관련 문제