博客

Semantic UI弹出窗口

  • Post category:jquery

这里是有关Semantic UI弹出窗口的完整攻略。

简介

Semantic UI是一种基于框架的UI组件库，可以帮助您快速构建漂亮、现代和响应式设计的界面。其中包含了一系列的组件，包括了面包屑导航、表格、卡片等等。其中弹出窗口是一个非常实用的组件，它能够在当前页面上弹出一个窗口，显示完整的信息。

安装与使用

要使用Semantic UI弹出窗口，需要先在您的项目中引入Semantic UI框架，您可以使用CDN或者下载本地文件的方式进行导入。在HTML文件中，您需要使用<div class="ui modal">来创建一个弹出窗口。

<!-- 引入Semantic UI的CSS和JS文件 -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdn.jsdelivr.net/semantic-ui/2.4.1/semantic.min.js"></script>

<!-- 创建一个弹出窗口 -->
<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    弹出窗口标题
  </div>
  <div class="content">
    弹出窗口的内容
  </div>
  <div class="actions">
    <div class="ui black deny button">
      取消
    </div>
    <div class="ui positive right labeled icon button">
      确定
      <i class="checkmark icon"></i>
    </div>
   </div>
</div>

上面的代码使用了一个带有class="ui modal"的div元素来创建了一个弹出窗口。其中关闭按钮使用了i class="close icon", 头部使用了<div class="header>，主体内容使用了<div class="content">。底部的取消与确定按钮则分别使用了<div class="ui black deny button">与<div class="ui positive right labeled icon button">两个class。

要在页面上显示弹出窗口，需要使用JavaScript来与HTML元素进行交互。

// 初始化弹出窗口
$('.ui.modal').modal('attach events', '.open-modal', 'show');

// 响应点击事件，显示弹出窗口
$('.open-modal').on('click', function() {
  $('.ui.modal').modal('show');
});

上面的代码中$('.ui.modal').modal('attach events', '.open-modal', 'show');用于将.open-modal元素与弹出窗口相关联，并将弹出窗口初始化为与.ui.modal元素相关联。

然后，当您点击.open-modal元素时，会弹出弹出窗口。

<button class="ui button open-modal">点击我打开弹出窗口</button>

以上的代码演示了如何创建并在页面上显示一个弹出窗口。

示例

下面是两个示例：

示例1

<!-- 创建一个按钮，在点击时显示弹出窗口 -->
<button class="ui button open-modal">点击我打开弹出窗口</button>

<!-- 创建一个弹出窗口 -->
<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    弹出窗口标题
  </div>
  <div class="content">
    这是一个示例的弹出窗口。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="actions">
    <div class="ui black deny button">
      取消
    </div>
    <div class="ui positive right labeled icon button">
      确定
      <i class="checkmark icon"></i>
    </div>
   </div>
</div>

<!-- 引入Semantic UI的CSS和JS文件 -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdn.jsdelivr.net/semantic-ui/2.4.1/semantic.min.js"></script>

<!-- JavaScript代码，初始化和显示弹出窗口 -->
<script>
  $(document).ready(function() {
    $('.ui.modal').modal('attach events', '.open-modal', 'show');
  });
  $('.open-modal').on('click', function() {
    $('.ui.modal').modal('show');
  });
</script>

示例2

<!-- 创建多个按钮，在点击时显示对应的弹出窗口 -->
<div class="ui three buttons">
  <button class="ui button open-modal-1">弹出窗口1</button>
  <button class="ui button open-modal-2">弹出窗口2</button>
  <button class="ui button open-modal-3">弹出窗口3</button>
</div>

<!-- 创建多个弹出窗口 -->
<div class="ui modal open-modal-1">
  <i class="close icon"></i>
  <div class="header">
    弹出窗口1标题
  </div>
  <div class="image content">
    <img class="ui medium image" src="https://semantic-ui.com/images/avatar2/large/elyse.png">
    <div class="description">
      弹出窗口1的内容。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="actions">
    <div class="ui black deny button">
      取消
    </div>
    <div class="ui positive right labeled icon button">
      确定
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>

<div class="ui modal open-modal-2">
  <i class="close icon"></i>
  <div class="header">
    弹出窗口2标题
  </div>
  <div class="content">
    弹出窗口2的内容。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="actions">
    <div class="ui black deny button">
      取消
    </div>
    <div class="ui positive right labeled icon button">
      确定
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>

<div class="ui modal open-modal-3">
  <i class="close icon"></i>
  <div class="header">
    弹出窗口3标题
  </div>
  <div class="content">
    弹出窗口3的内容。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="actions">
    <div class="ui black deny button">
      取消
    </div>
    <div class="ui positive right labeled icon button">
      确定
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>

<!-- 引入Semantic UI的CSS和JS文件 -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdn.jsdelivr.net/semantic-ui/2.4.1/semantic.min.js"></script>

<!-- JavaScript代码，初始化和显示弹出窗口 -->
<script>
  $(document).ready(function() {
    $('.ui.modal').modal('attach events', '.open-modal-1', 'show');
    $('.ui.modal').modal('attach events', '.open-modal-2', 'show');
    $('.ui.modal').modal('attach events', '.open-modal-3', 'show');
  });
</script>

以上两个示例演示了如何在页面中使用Semantic UI弹出窗口。

Tags: