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>  
...

你可以在那里看到工作样本：

＆＃13;

<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>

＆＃13;

希望它有所帮助，

语义ui模态错误

1 个答案: