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

整个问题是您尝试附加click事件的元素不存在。您已指定id="#register"，而不是id="register"

更正属性将完成工作：

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

模态本身的id似乎是正确的，但是：）

这样的事情很容易调试，只需在控制台中输入$('#register')，你就会发现jquery找不到任何匹配的元素。

Answer 2

想出来了！

我猜你打开模态的按钮必须是一个类吗？

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

然后传递这样的JavaScript：

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

在语义ui中打开模态

2 个答案: