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> 

そして、ここでは私はJavaScriptである：

<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> 

は、このようにJavaScriptで渡す：

<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は一致する要素を見つけることができません。