语义 UI 模态未打开

Question

我正在使用 Semantic UI 并创建了一个带有 click 事件的按钮，单击该按钮应该会打开模式，但没有任何反应。

当我点击 link 时没有任何反应，我不知道出了什么问题。

这是按钮：

<a class="item" id="logIn">
    <i class="user icon"></i> Log In 
</a>

JavaScript:

 <script type="text/javascript">

  $('#logIn').click(function(){
    $('#modaldiv').modal('show');    
  });

  </script>

模态代码：

<div id="modaldiv" class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Profile Picture
  </div>
  <div class="content">
    <div class="ui medium image">
      <img src="/images/avatar/large/chris.jpg">
    </div>
    <div class="description">
      <div class="ui header">We've auto-chosen a profile image for you.</div>
      <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
      <p>Is it okay to use this photo?</p>
    </div>
  </div>
  <div class="actions">
    <div class="ui black button">
      Nope
    </div>
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>

Answer 1

您可能会在 DOM 准备好之前绑定事件，因此请尝试将您的代码包装在 doc ready 中：

$(document).ready(function(){
     $('#logIn').click(function(){
        $('#modaldiv').modal('show');    
     });
});

还有一个是你可以在浏览器的控制台中检查错误，这可以帮助你理解问题。

Answer 2

确保将 jquery 脚本放在语义

之前

<script src="scripts/jquery.js"></script>
<script src="scripts/semantic.js"></script>

语义 UI 模态未打开

Semantic UI modal not opening

html

javascript

jquery

modal-dialog

semantic-ui