David David - 4 months ago 33
jQuery Question

Open Modal in semantic-ui

I just cant figure out how to open this modal. I usually use Bootstrap, but wanted to try a new layout.

Here is the button that I use to open the Modal:

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


Here is my 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>


And Here is my 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

The whole problem is that the element to which you try to attach the click event does not exist. You have specified id="#register", instead of id="register"

correcting the attribute will do the job:

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

The id of the modal itself seems to be correct, though :)

Such things are very easy to debug, simply type $('#register') in the console, and you'll see that jquery cannot find any matching element.