Question

我想在我的页面中使用模态。但是当我称之为浏览器控制台错误模态时，没有定义包含文件到索引文件：

  <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 这是语义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>

因为现在您在加载Semantic之前尝试执行$().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工具包中的模态错误

1 个答案: