CODEWITHSUNDEEP
javascriptjquerysemantic-ui
David
David

Reputation: 1997

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>

Upvotes: 0

Views: 5124

Answers (2)

mikus
mikus

Reputation: 3215

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.

Upvotes: 4

David
David

Reputation: 1997

Figured it out!

I guess the button that you open the modal with has to be a class?

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

Then pass in JavaScript like this:

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

Upvotes: -3

Related Questions