博客

layui之弹出层

  • Post category:other

layui之弹出层攻略

Layui是一款轻量级的前端UI框架，提供了丰富的组件和工具，方便开发人员快速构建美观、易用的Web界面。本攻略中，我们将介绍Layui中的弹出层组件，并提供两个示例说明。

步骤

以下是使用Layui中的弹出层组件的步骤：

  1. 引入Layui

在使用Layui中的弹出层组件之前，我们需要先引入Layui。可以通过以下方式引入：

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
  1. 编写HTML代码

在HTML代码中，我们需要定义一个按钮或其他元素，用于触发弹出层。例如：

<button class="layui-btn" id="btn">点击弹出层</button>

在此示例中，我们定义了一个按钮，其ID为btn。

  1. 编写JavaScript代码

在JavaScript代码中，我们使用Layui的弹出层组件来创建弹出层。例如：

layui.use('layer', function  var layer = layui.layer;

  $('#btn').on('click', function(){
    layer.open({
      type: 1,
      title: '弹出层标题',
      content: '这是弹出层的内容'
    });
  });
});

在此示例中，我们使用Layui的layer块创建了一个弹出层。当按钮被点击时，弹出层将显示在页面上。

示例1：使用Layui弹出层显示图片

以下是一个使用Layui弹出层显示图片的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui弹出层示例</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
</head>
<body>
  <button class="layui-btn" id="btn">点击查看图片</button>
  <script>
    layui.use('layer', function(){
      var layer = layui.layer;

      $('#btn').on('click', function(){
        layer.open({
          type: 1,
          title: false,
          closeBtn: 0,
          area: ['auto', 'auto'],
          skin: 'layui-layer-nobg', //没有背景色
          shadeClose: true,
          content: '<img src="https://cdn.staticfile.org/layui/2.5.6/images/face/0.gif" />'
        });
      });
    });
  </script>
</body>
</html>

在此示例中，我们定义了一个按钮，当按钮被点击时，弹出层将显示一个图片。

示例2：使用Layui弹出层显示表单

以下是一个使用Layui弹出层显示表单的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui弹出层示例</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
</head>
<body>
  <button class="layui-btn" id="btn">点击填写表单</button>
  <script>
    layui.use('layer', function(){
      var layer = layui.layer;

      $('#btn').on('click', function(){
        layer.open({
          type: 1,
          title: '填写表单',
          area: ['500px', '300px'],
          content: '<form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-block"><input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form>'
        });
      });
    });
  </script>
</body>
</html>

在此示例中，我们定义了一个按钮，当按钮被点击时，弹出层将显示一个表单。

总结

Layui的弹出层组件是一种方便的工具，可以帮助我们在Web界面中创建弹出层。使用Layui的弹出层组件非常简单，只需要引入Layui，然后使用layer模块创建弹出层即可。在本攻略中，我们提供了两个示例，用于显示图片和表单。

Tags: