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/zh-tw/n/300288.html

layui彈出層彈出form詳解

一、layui彈出層彈出照片

二、layui 彈出層 彈出form

三、layui彈出層表單

四、layui彈出層自定義按鈕

五、layui彈出層ajax

相關推薦

發表回復

二、layui 彈出層彈出form