layuilayer弹出层怎么改变父页面内容

什么是layui.layer弹出层？

layui.layer是LayUI框架中的一个功能组件，它是弹出层的集合，包括全局配置、信息框、询问框、页面层、加载层、tips层、弹出层常用API等组成。在项目中使用layui.layer可以大大加快前端开发效率，实现更好的用户交互效果。

  
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.all.js">

layui.layer如何弹出页面？

layui.layer.page(url, options)方法可以弹出页面，options是可选参数对象，用于配置弹出层。

  // 示例代码1：弹出百度首页，大小为800x600
  layui.layer.page('https://www.baidu.com', {
    area: ['800px', '600px']
  });
  
  // 示例代码2：弹出指定页面，如test.html，大小为全屏（即最大化）
  layui.layer.page('test.html', {
    fullscreen: true
  });

如何在弹出层中传递参数并使其影响到父页面？

在弹出层中使用layui.layer.getChildFrame('body', index)方法获取iframe页面的DOM元素，之后可以对DOM元素进行操作。可以使用JavaScript中的window.parent对象来获取父级窗口中的内容，使用window.parent.document.getElementById()和window.parent.document.getElementsByClassName()等方法来获取DOM元素。

  
  
  <button id="btn">弹出层
  
  <script>
    layui.use(['layer'], function() {
      var layer = layui.layer;
      var index;
      $('#btn').on('click', function() {
        index = layer.open({
          type: 2,
          title: '弹出层',
          content: 'child.html',
          area: ['400px', '300px'],
          success: function() {
            // 成功弹出层时执行
          }
        });
      });
    });
  </script>

  
  
  <button id="btn">传递参数到父页面
  
  <script>
    layui.use(['layer'], function() {
      var layer = layui.layer;
      $('#btn').on('click', function() {
        var option = '参数值';
        var index = parent.layer.getFrameIndex(window.name);
        var body = parent.layer.getChildFrame('body', index);
        var dom = body.contents().find('#parent_dom');
        dom.val(option);
      });
    });
  </script>

  
  
  <input type="text" id="parent_dom">

使用layui.layer弹出层可以实现什么样的效果？

layui.layer弹出层是可高度自定义的，可以实现各种各样的效果。例如使用layui.layer.msg()方法可以弹出消息提示框，使用layui.layer.load()方法可以显示加载框，使用layui.layer.tips()方法可以弹出气泡提示框等等。

  // 示例代码1：弹出消息提示框
  layui.layer.msg('弹出成功');
  
  // 示例代码2：显示加载框
  layui.layer.load(1); // 加载中...
  
  // 示例代码3：弹出气泡提示框
  layui.layer.tips('提示信息', '#btn');

总结

使用layui.layer弹出层组件可以快速实现前端开发中的对话框、信息框、提示框、加载层等功能，方便用户在页面上进行操作，增强网站的交互性和用户体验。在使用过程中，我们需要注意多个弹出层的层次关系和事件绑定的正确性，以达到最好效果。

  
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.all.js">
  
  <!-- 示例代码1：弹出层 -->
  <button onclick="layer.open({type: 1,title: false,closeBtn: false,shadeClose: true,content: $('.demo')});">点我</button>
  <div class="demo" style="display:none;">
      <p>在弹出层中：

      <p>可以使用layui.layer.msg()方法可以弹出消息提示框，使用layui.layer.load()方法可以显示加载框，使用layui.layer.tips()方法可以弹出气泡提示框等等。</p>
  </div>
  
  <!-- 示例代码2：处理点击事件 -->
  <p><button onclick="clickBtn()">点击我</button></p>
  <p><input type="text" id="text" value=""></p>
  <script>
    function clickBtn() {
        var index = layer.open({
            type: 1,
            content: '这个是自定义弹层的内容
你可以在这里放任意html
想怎么弄就怎么弄',
            btn: ['按钮一', '按钮二', '按钮三'],
            offset: 't',
            yes: function (index, layero) {
                alert("按钮一点击");
            }, btn2: function (index, layero) {
                alert("按钮二点击");
                return false//开启该代码可禁止点击该按钮关闭
            }, btn3: function (index, layero) {
                alert("按钮三点击");
                return false//开启该代码可禁止点击该按钮关闭
            }
        });
        //页面层
        layer.open({
            type: 1,
            shade: false,
            anim: 5,
            area: ['50%', '50%'],
            content: '
这个是页面层
可任意添加html
'
        });
    }
  </script>