layer的使用

一、layer弹出层父子之间交互
  • 1、子页面 -> 父页面
var $pElId = parent.$("#pXyzId").val(); // 1、获取父页面元素
var pVal = $pElId.val(); // 获取父页面元素的值
$pElId.val("xxx"); // 更改父页面元素的值

var pMethodFunc = parent.getPMethod(); // 2、访问父页面方法 

// 3、关闭弹出的子页面窗口
var layerId = parent.layer.getFrameIndex(window.name); // 获取窗口索引  
parent.layer.close(layerId);

// 4、从子页面执行刷新父页面
parent.location.reload(); // 刷新父页面  
  • 2、父 -> 子
    一般是在打开success成功回调中获取子页面的元素来操作
layer.open({
    title : "xxxx",
    type : 2,
    content : "./xyz.html",
    success : function(layero, index){
        var body1 = $($(".layui-layer-iframe", parent.document).find("iframe")[0].contentWindow.document.body);
        var body2 = layer.getChildFrame('body', index); // 获取子页面body
        var iframeWin = window[layero.find('iframe')[0]['name']];

        //     body1.find(".linkLogo").css("background","#fff");
        //     form.render();
    }
})
### Layer 弹层组件使用教程 #### PC 版本的 Layer 组件介绍与使用方法 Layer 是一款用于创建弹窗效果的强大前端工具,适用于网页开发中的各种场景。对于PC端应用而言,Layer 提供了一系列简单易用的方法来快速集成到项目中。 为了在页面上显示一个基本的信息提示框,可以调用 `layer.msg()` 方法[^1]: ```javascript // 显示一条简单的消息通知 layer.msg('这是一条信息'); ``` 如果想要打开一个新的窗口作为对话框,则可利用 `layer.open({})` 函数并传入配置对象: ```javascript // 打开一个带有标题栏和关闭按钮的标准模态框 layer.open({ type: 1, title: '我的对话框', content: '<div style="padding:20px;">这里是内容区域</div>', }); ``` 此外,还支持加载远程HTML文件作为弹出层的内容源: ```javascript // 加载外部链接至弹出层内展示 layer.open({ type: 2, // iframe模式 area: ['80%', '80%'], // 设置宽高比例 fixed: false, // 不固定位置 maxmin: true, // 启用最大化最小化功能 shadeClose: true, // 开启遮罩点击关闭 content: '/example.html' // 远程地址 }); ``` #### 移动版本的 Layer 组件特性说明 针对移动端设备优化过的Layer插件同样具备丰富的API接口,允许开发者轻松定制不同类型的交互体验。例如通过设置不同的参数组合即可实现全屏滑动手势返回、底部菜单选择等功能[^2]。 下面是一个典型的例子展示了如何在一个手机浏览器里呈现一个确认操作面板: ```javascript var index = layer.mConfirm('您确定要删除这条记录吗?', function(){ // 用户选择了“确定” },function(){ // 用户选择了“取消” }); // 关闭当前确认框 layer.close(index); ``` 以上就是有关于Layer框架的基础入门指南及其部分核心特性的概述。无论是桌面级还是手持终端上的应用场景都能找到合适的解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值