semantic-ui에서 Open Modal

Question

이 모달을 여는 방법을 알 수 없습니다. 나는 보통 Bootstrap을 사용하지만 새로운 레이아웃을 시도하고 싶다.

다음

<div class="ui pointing menu"> 
     <a class="item" id="#register">Register</a> 
     @include('auth.modals') 
</div> 

내 모달입니다 : 여기

내가 모달을 열 때 사용하는 버튼입니다

<div id="register-modal" class="ui modal"> 
    <i class="close icon"></i> 
    <div class="header"> 
     Profile Picture 
    </div> 
    <div class="image content"> 
     <div class="ui medium image"> 
      <img src=""> 
     </div> 
     <div class="description"> 

     </div> 
    </div> 
    <div class="actions"> 
     <div class="ui black deny button"> 
      Nope 
     </div> 
     <div class="ui positive right labeled icon button"> 
      Yep, that's me 
      <i class="checkmark icon"></i> 
     </div> 
    </div> 
</div> 

그리고 여기 내 자바 스크립트입니다 :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script src="semantic/dist/semantic.min.js"></script> 

     <script> 
      $(document).ready(function(){ 
       $('#register').click(function(){ 
        $('#register-modal').modal('show'); 
       }); 
      }); 
     </script> 

Answer 1

이 체격 아웃!

모달을 여는 버튼은 클래스 여야한다고 생각하십니까?

<a class="item register">Register</a> 

는 다음과 같이 자바 스크립트로 전달 :

<script> 
      $(document).ready(function(){ 
       $('.register').click(function(){ 
        $('#register-modal').modal('show'); 
       }); 
      }); 
     </script> 

Answer 2

전체 문제 요소가있는 사용자가 클릭 이벤트가 존재하지 않는 연결을 시도하는 것입니다. 당신은 일을 할 것입니다 속성을 수정하는 대신 id="register"

의, id="#register"를 지정 :

<div class="ui pointing menu"> 
     <a class="item" id="register">Register</a> 
     @include('auth.modals') 
</div> 

이러한 일들이 매우 쉽습니다 :)하지만 그 자체가 올바른 것 같다 모달의 ID, 디버그하려면 $('#register')을 콘솔에 입력하면 jquery가 일치하는 요소를 찾을 수 없다는 것을 알 수 있습니다.