semtic - ui模态不起作用

Sementic-UI Modal is not working?

本文关键字：不起作用 模态 ui semtic      更新时间：2023-09-26

如何编写模态代码?我尝试作为语义文档，但我不能得到结果。

我包括:

——

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

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

你的代码有两个问题:

  1. 你试图在它在HTML中声明之前获得.ui.modal。您必须在关闭body标记之前放置脚本标记，但在所有其他标记之后。或者你必须使用一些ready事件。
    2. 你的代码有一个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>

相关文章：