ui 套件中的模态错误

Question

我想在我的 page.but 中使用模态，当我调用它时浏览器控制台错误模态
未定义包含文件到索引文件：

  <link rel="stylesheet" type="text/css" href="./dist/semantic.min.css">
  <script src="dist/components/modal.js"></script>
  <link rel="stylesheet" type="text/css" href="dist/components/modal.css">
  <script src="dist/components/modal.js"></script>
  <link rel="stylesheet" type="text/css" href="dist/components/modal.min.css">
  <script src="dist/components/modal.min.js"></script>
<script src="./dist/semantic.min.js"></script>

这是我调用模态的代码：

  $(document).ready(function(){
     alert("Document Was ready");
     $('#sign').click(function(){
       $('.modal').modal('show');
     });
  });

这是错误：TypeError: $(...).modal is not a function 这是语义模态的link-ui:http://semantic-ui.com/modules/modal.html
我用第一个模式^_^

Answer 1

你必须移动：

<script src="dist/components/modal.min.js"></script>

之后：

<script src="./dist/semantic.min.js"></script>

因为现在您正试图在语义加载之前执行 $().modal。此外，您正在加载它两次，也是一个缩小版本；我假设你只需要缩小版本。

您的代码应如下所示：

<link rel="stylesheet" type="text/css" href="./dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="dist/components/modal.css">
<link rel="stylesheet" type="text/css" href="dist/components/modal.min.css">
<script src="./dist/semantic.min.js"></script>
<script src="dist/components/modal.min.js"></script>

最好在脚本之前加载 CSS 个文件。

ui 套件中的模态错误

Modal error in ui kit

javascript

semantic-ui