layui弹出层点击弹出框取值;layui弹出层的content url

在使用Layui框架开发Web应用时，经常会遇到需要弹出一个对话框，并从该对话框中获取用户输入或选择的值的情况。本文将介绍如何使用Layui的弹出层组件实现这一功能，并提供多种解决方案。

解决方案概述

Layui的弹出层组件提供了多种方式来显示内容，包括直接显示HTML字符串、加载外部URL等。本文将重点介绍如何通过点击弹出框获取值，并展示如何设置弹出层的内容为外部URL。

使用Layui弹出层点击弹出框取值

方法一：直接显示HTML字符串

首先，我们可以通过直接显示HTML字符串的方式来创建弹出层，并在其中添加表单元素。当用户提交表单时，我们可以捕获表单数据并进行处理。

html
</p>



  
  <title>Layui 弹出层示例</title>
  


  <button id="openLayerBtn">打开弹出层</button>

  
  
    layui.use(['layer'], function() {
      var layer = layui.layer;

      document.getElementById('openLayerBtn').addEventListener('click', function() {
        layer.open({
          type: 1,
          title: '输入框',
          content: '<div style="padding: 20px">' +
                     '' +
                       '' +
                       '<br><br>' +
                       '<button type="button" class="layui-btn" id="submitBtn">提交</button>' +
                     '' +
                   '</div>',
          area: ['400px', '250px'],
          btn: ['关闭'],
          yes: function(index, layero) {
            layer.close(index);
          }
        });

        document.getElementById('submitBtn').addEventListener('click', function() {
          var username = document.querySelector('input[name="username"]').value;
          if (username) {
            layer.msg('您输入的用户名是: ' + username);
          } else {
            layer.msg('请输入用户名');
          }
        });
      });
    });
  



<p>

方法二：加载外部URL

另一种常见的方法是通过加载外部URL来显示弹出层的内容。这种方式适用于需要动态生成内容或从服务器获取数据的场景。

假设我们有一个外部页面 form.html，内容如下：

html
<!-- form.html --></p>

<div style="padding: 20px">
  
    
    <br><br>
    <button type="button" class="layui-btn" id="submitBtn">提交</button>
  
</div>


  document.getElementById('submitBtn').addEventListener('click', function() {
    var username = document.querySelector('input[name="username"]').value;
    if (username) {
      parent.layer.msg('您输入的用户名是: ' + username);
    } else {
      parent.layer.msg('请输入用户名');
    }
  });


<p>

主页面代码如下：

html
</p>



  
  <title>Layui 弹出层示例</title>
  


  <button id="openLayerBtn">打开弹出层</button>

  
  
    layui.use(['layer'], function() {
      var layer = layui.layer;

      document.getElementById('openLayerBtn').addEventListener('click', function() {
        layer.open({
          type: 2,
          title: '输入框',
          content: 'form.html',
          area: ['400px', '250px'],
          btn: ['关闭'],
          yes: function(index, layero) {
            layer.close(index);
          }
        });
      });
    });
  



<p>