在语义中打开模态-ui

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

想通了！

我猜你打开模式的按钮必须是 class?

  <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找不到任何匹配的元素。

在语义中打开模态-ui

Open Modal in semantic-ui

javascript

jquery

semantic-ui