2015-01-10 4 views
3

시맨틱 UI를 사용 중이며 click 이벤트가있는 버튼을 만들었습니다. 클릭하면이 모달이 열리지 만 아무 일도 일어나지 않습니다.시맨틱 UI 모달이 열리지 않습니다.

링크를 클릭해도 아무런 변화가 없습니다. 무엇이 잘못 될지 알 수 없습니다. 여기

버튼입니다 :

<a class="item" id="logIn"> 
    <i class="user icon"></i> Log In 
</a> 

자바 스크립트 :

<script type="text/javascript"> 

    $('#logIn').click(function(){ 
    $('#modaldiv').modal('show');  
    }); 

    </script> 

모달 코드 :

<div id="modaldiv" class="ui modal"> 
    <i class="close icon"></i> 
    <div class="header"> 
    Profile Picture 
    </div> 
    <div class="content"> 
    <div class="ui medium image"> 
     <img src="/images/avatar/large/chris.jpg"> 
    </div> 
    <div class="description"> 
     <div class="ui header">We've auto-chosen a profile image for you.</div> 
     <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p> 
     <p>Is it okay to use this photo?</p> 
    </div> 
    </div> 
    <div class="actions"> 
    <div class="ui black button"> 
     Nope 
    </div> 
    <div class="ui positive right labeled icon button"> 
     Yep, that's me 
     <i class="checkmark icon"></i> 
    </div> 
    </div> 
</div> 

답변

3

DOM이되기 전에 이벤트 방법을 결합하는 것이 가능 수 준비가되었으므로 대신 코드를 준비하여 문서를 준비하십시오.

$(document).ready(function(){ 
    $('#logIn').click(function(){ 
     $('#modaldiv').modal('show');  
    }); 
}); 

또 다른 한가지는 당신이 문제를 이해하는 데 도움이 브라우저의 콘솔에서 오류를 확인할 수 있습니다.

+0

고맙습니다. – user3574492

0

또한 나를 위해 일을 의미

<script src="scripts/jquery.js"></script> 
<script src="scripts/semantic.js"></script> 
1

자이 솔루션 전에 당신이 당신의 jquery 스크립트를 넣어 있는지 확인합니다. 클래스 대신 ID를 사용하여 선택했습니다.

관련 문제