语义 ui 模态错误

Question

我已经尝试过，但找不到我的问题的任何答案。

我想使用语义模态，第一个，this！

我的进口商品是：

<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/components/modal.css">
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/components/modal.min.css">


<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js">         </script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js">  </script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="moduli/jquery-ui/jquery-ui.js"></script>
<script src="moduli/semantic/dist/components/modal.min.js"></script>

控制台错误：

modal.min.js:11 Uncaught TypeError: O.transition is not a function

modal.min.js:11 Uncaught TypeError: q.dimmer is not a function

当我点击一个按钮时，我调用下面的 js function:

$('.ui.modal')
   .modal({onShow: function(){}})
   .modal('show');

Answer 1

我认为您的错误只是来自 <script> 导入的顺序，因为 semantic.min.js 取决于 jQuery 你必须在 semantic.min.js

之前包含 jQuery

所以使用：

...
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"></script>  
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
...

而不是：

...
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"></script>  
...

您可以在那里看到工作示例：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

<input type="button" value="showModal" onClick="$('.ui.modal').modal('show');"></input>
  <div class="ui modal">
   <div class="header">Header</div>
   <div class="content">
  <p>some Content</p>
  <p></p>
  <p></p>
   </div>
  </div>

希望对您有所帮助，

语义 ui 模态错误

Semantic ui modal error

javascript

semantic-ui