부트 스트랩 3 모달이 버튼 클릭으로 작동하지 않습니다.

튜토리얼을 따라 간단한 모달을 만들었습니다. 버튼을 클릭하면 모달이 표시되지 않습니다. 나는 href을 data-target으로 변경하려고 시도했지만 그 문제는 해결되지 않습니다. 아래 코드는 모달 코드입니다. 내 CSS 또는 JavaScript 파일에는 아무 것도 없습니다.부트 스트랩 3 모달이 버튼 클릭으로 작동하지 않습니다.

<a data-target="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Sign up for weekly newsletter</a> 

<div class="modal fade" id="myModal"> 
       <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <button class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Sign up for the newsletter</h4> 
        <div class=modal-body> 

        </div> 
        </div> 
       </div> 
       </div> 
      </div>

는 여기 CodePen입니다 : http://codepen.io/jordanbaron123/pen/pbamPa

출처

2016-07-19 Jordan M. Baron

버튼 코드를 볼 수 있습니까? –

@CharlieFish 나는 그것을 추가했다. –

부트 스트랩 JS가 포함 되었습니까 아니면 CSS 만 포함되어 있습니까? 나는 그것이 모달의 차이를 만드는 것인지 잊는다. 나는 그것이 어떤 일을하는 것을 알고 있습니다. 나는 당신이 modals tho를 위해 그것을 필요로한다라고 생각한다. –

머리가 다음과 같아야합니다. 또한 몸 밑에있는 부트 스트랩 링크를 제거하십시오. 예전 버전의 부트 스트랩 j를 실행 한 것처럼 보입니다. 여기

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

는 예로서 Codepen이다.

출처

2016-07-19 23:13:43

감사합니다. –

니스! 다행히 도울 수있어 !!! –

봅니다 body 태그 후 아마 즉시, html로의 루트에 모달 HTML을 넣어. 그것은 모든 HTML의 맨 아래에 배치 될 수 있지만, 본문의 즉각적인 중첩 요소 또는 그 이후의 하나의 div로 배치됩니다.

몸> DIV> 모달 HTML
몸> 모달 HTML

그런 다음 작동됩니다 :

모달 HTML이 다음 즉시 중첩와 함께 작동합니다. 그렇지 않으면 모달 HTML이 많은 중첩 요소 안에 배치되면 작동하지 않습니다.

감사합니다.

출처

2016-07-19 22:50:45

그래도 작동하지 않습니다. –

부트 스트랩 3 모달이 버튼 클릭으로 작동하지 않습니다.

답변

관련 문제