Open Modal in Semantik-UI

Question

Ich kann einfach nicht herausfinden, wie dieses Modal zu öffnen. Ich benutze normalerweise Bootstrap, wollte aber ein neues Layout ausprobieren. Hier

ist die Taste, die ich benutze den Modal zu öffnen:

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

Hier ist meine Modal:

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

Und hier ist mein 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

es Figured aus!

Ich denke, dass der Knopf, den Sie das modale mit öffnen, eine Klasse sein muss?

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

passieren dann in JavaScript wie folgt aus:

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

Answer 2

Das ganze Problem ist, dass das Element, dem Sie versuchen, das Click-Ereignis nicht existiert zu befestigen. Sie haben id="#register" angegeben, statt id="register"

das Attribut Korrektur wird die Arbeit machen:

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

Die ID des modalen selbst scheint korrekt zu sein, aber :)

Solche Dinge sind sehr einfach Um zu debuggen, geben Sie einfach $('#register') in die Konsole ein und Sie werden sehen, dass jquery kein passendes Element finden kann.