Question

如何编写模态代码？我尝试了语义文档，但我无法得到结果。

我包括： -

<link rel="stylesheet" type="text/css" href="css/semantic.css">
<link rel="stylesheet" type="text/css" 
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/semantic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.js"></script>
<script type="text/javascript">
$('.ui.modal').modal('show');
});
</script>

这是我的代码： -

<div class="ui modal">
  <form class="ui form">
  <div class="field">
    <label>Old password</label>
    <input type="text" name="oldpass" placeholder="old password">
  </div>
  <div class="field">
    <label>Last Name</label>
    <input type="text" name="newpass" placeholder="new password">
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox" tabindex="0" class="hidden">
      <label>I agree to the Terms and Conditions</label>
    </div>
  </div>
  <button class="ui button" type="submit">Submit</button>
</form>
</div>

请提出一些想法。提前谢谢..

Answer 1

您的代码中存在两个问题：

您正试图在HTML中声明之前获取.ui.modal。您必须在关闭body标记之前放置脚本标记，但必须放在所有其他标记之后。或者您必须使用一些ready事件。
您的代码有一个sintax错误。您必须在脚本末尾删除});。

看一下下面的例子：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.css">
<link rel="stylesheet" type="text/css" 
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.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.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.js"></script>
<div class="ui modal">
  <form class="ui form">
  <div class="field">
    <label>Old password</label>
    <input type="text" name="oldpass" placeholder="old password">
  </div>
  <div class="field">
    <label>Last Name</label>
    <input type="text" name="newpass" placeholder="new password">
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox" tabindex="0" class="hidden">
      <label>I agree to the Terms and Conditions</label>
    </div>
  </div>
  <button class="ui button" type="submit">Submit</button>
</form>
</div>


<script type="text/javascript">
$('.ui.modal').modal('show');
</script>

Sementic-UI模态不起作用？

1 个答案: