layui弹出层弹出form详解

一、layui弹出层弹出照片

弹出层在前端开发中非常常见，对于图片的展示也是一个很重要的场景。在layui中，我们可以通过弹出层来实现图片的展示。

首先，我们需要引入layui的css和js文件，然后给按钮绑定一个点击事件，点击该按钮时触发弹出层：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui弹出层弹出照片</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
</head>
<body>
  <button id="imgBtn">点我弹出层</button>
  <script>
    layui.use('layer', function(){
      var layer = layui.layer;
      $('#imgBtn').click(function(){
        layer.photos({
          photos: {
            "title": "自定义标题",
            "data": [{
              "alt": "图片名",
              "src": "图片地址"
            }]
          }
        });
      });
    });
  </script>
</body>
</html>

上面的代码中，我们引入了layui的css和js文件，然后在button的点击事件中，使用layer.photos来弹出图片。我们将图片的标题和路径封装成一个对象，然后传给photos的参数即可。

二、layui 弹出层弹出form

弹出层除了用来展示信息，还可以用来展示表单。Layui中的layer模块提供了弹出层中form的API，我们只需要按照相应的格式来调用相应的函数，就可以实现在弹出层中展示表单的功能。

下面是一个简单的示例，点击按钮弹出弹出层中包含表单，点击提交按钮时，可以在控制台输出表单数据：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui 弹出层 弹出form</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
</head>
<body>
  <button id="formBtn">点我弹出层</button>
  <script>
    layui.use('layer', function(){
      var layer = layui.layer;
      $('#formBtn').click(function(){
        layer.open({
          type: 1,
          title: '弹出层中包含表单',
          area: ['500px', '300px'],
          content: '<form class="layui-form"><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="uname" 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="pwd" 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>',
          success: function(layero, index){
            layui.use(['form'], function(){
              var form = layui.form;
              form.on('submit(formDemo)', function(data){
                console.log(data.field)
                return false;
              });
            });
          }
        });
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们引入了Layui的css和js文件，并且在按钮的点击事件中，使用layer.open来弹出层中包含表单。在弹出层中包含表单的HTML代码中，我们使用了Layui的表单布局，并在提交表单时使用了form.on的事件监听来获取表单数据。

三、layui弹出层表单

Layui中的表单组件提供了丰富的表单元素和验证功能，我们可以在弹出层中使用Layui的表单组件，以实现更好的用户体验。

下面是一个示例，点击按钮弹出层中包含表单，表单中包含了多个表单元素，并且有必填项以及自定义规则的验证：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui弹出层表单</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
</head>
<body>
  <button id="fBtn">点我弹出层</button>
  <script>
    layui.use(['form', 'layer'], function(){
      var form = layui.form;
      var layer = layui.layer;
      $('#fBtn').click(function(){
        layer.open({
          type: 1,
          title: 'information',
          area: ['500px', '300px'],
          content: '<form class="layui-form"><div class="layui-form-item"><label class="layui-form-label">username</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">password</label><div class="layui-input-block"><input type="password" name="pwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">email</label><div class="layui-input-block"><input type="text" name="email" required lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">age</label><div class="layui-input-block"><input type="text" name="age" required lay-verify="number" 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">Submit</button></div></div></form>',
          success: function(layero, index){
            form.render();
          }
        });
      });
      form.on('submit(formDemo)', function(data){
        console.log(data.field)
        return false;
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们引入了Layui的css和js文件，并给按钮绑定了一个点击事件。在该点击事件中，我们使用layer.open来弹出层中的表单，并使用Layui表单组件提供的验证功能来对表单元素进行验证。在表单验证通过后，可以在控制台输出表单数据。

四、layui弹出层自定义按钮

Layui弹出层不仅可以包含表单，还可以包含自定义按钮。我们可以通过layer.open的btn参数来自定义弹出层中的按钮。在弹出层中包含按钮，可以更加灵活地进行交互。

下面是一个示例，点击按钮弹出层中包含自定义按钮，点击按钮时会在控制台输出按钮的名称：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> layui弹出层自定义按钮</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
</head>
<body>
  <button id="btn">点我弹出层</button>
  <script>
    layui.use(['layer'], function(){
      var layer = layui.layer;
      $('#btn').click(function(){
        layer.open({
          type: 0,
          title: 'information',
          content: '确定进行操作吗？',
          btn: ['确定', '取消'],
          yes: function(index, layero){
            console.log('确定')
            layer.close(index);
          },
          btn2: function(index, layero){
            console.log('取消')
            layer.close(index)
          }
        });
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们引入了Layui的css和js文件，并在按钮的点击事件中使用layer.open来弹出层。在layer.open的btn参数中，我们可以自定义按钮的名称，并在yes和btn2的回调函数中来进行按钮的逻辑处理。在示例中，我们点击“确定”按钮时在控制台输出“确定”字符串，并关闭弹窗。

五、layui弹出层ajax

在前端开发中，我们经常需要通过ajax来进行异步操作。在Layui的弹出层中，我们同样可以使用ajax来对弹出层中的数据进行异步操作。

下面是一个简单的示例，点击按钮弹出层中异步获取数据：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui弹出层ajax</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
</head>
<body>
  <button id="btn" class="layui-btn">Click Me</button>
  <script>
    layui.use(['layer', 'jquery'], function(){
      var layer = layui.layer;
      var $ = layui.jquery;
    
      $('#btn').click(function(){
        $.ajax({
          url: 'https://api.github.com/users/liufei9936',
          type: 'GET',
          dataType: 'JSON',
          success: function(res){
            layer.open({
              type: 1,
              title: 'User Information',
              area: '600px',
              content: '<div class="user"><img src="' + res.avatar_url + '" alt="" /><p>用户名：' + res.login + '</p><p>名称：' + res.name + '</p><p>公司：' + res.company + '</p><p>位置：' + res.location + '</p></div>'
            });
          },
          error: function(err){
            console.log(err)
          }
        });
      })
    });
  </script>
</body>
</html>

在上面的代码中，我们引入了Layui和jQuery的文件，并在按钮的点击事件中，使用jQuery中的$.

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/300288.html

layui弹出层弹出form详解

一、layui弹出层弹出照片

二、layui 弹出层 弹出form

三、layui弹出层表单

四、layui弹出层自定义按钮

五、layui弹出层ajax

相关推荐

发表回复

二、layui 弹出层弹出form