layer.js:子页面修改layer弹窗的高度

最新推荐文章于 2024-06-19 16:42:32 发布

Stefan__M

最新推荐文章于 2024-06-19 16:42:32 发布

阅读量118

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Stefan__M/article/details/139681256

版权

1：父页面

layer.open({
    type: 2,    //iframe层
    area: ['600px','400px'],
    content: url
})

2:子页面

const layerIndex = parent.layer.getFrameIndex(window.name)

parent.layer.style(layerIndex,{
    height: '500px',
    top: 'calc(50% - 50px)'
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Stefan__M

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

动态设置iframe高度(iframe高度自适应)

rainbow702的博客

07-15

2193

如果需要对画面中的部分区域作局部刷新，大家可能都会想到使用ajax。但有些情况下，须使用在页面中嵌入一个iframe来作局部刷新。对于使用iframe的情况，发现有一个问题，就是iframe中的页面的高度可能会很高，但是外面页面并不会被iframe内部页面给撑开，如下面的结构： <div id="content"> <div id="frame"> ...

web弹窗插件layer.js

02-24

layer.js是一款近年来备受青睐的web弹层组件,操作简单，轻松上手。...<script type="text/javascript" src="../layer.js"> 2、js前端调用 layer.open({ title: '测试' ,content: '写相关的逻辑' });

参与评论您还未登录，请先登录后发表或查看评论

layer根据内容动态改变窗口高度

我的博客

09-15

890

通过layer.style动态...

关于layui的layer.open弹出层高度自适应的解决

yzw675628706的博客

03-31

1万+

在使用layui的layer插件打开弹出层的时候，会出现弹出层的Iframe高度设置为默认的150px，这样会导致出现滚动条或者内容显示不全的现象，在网上面也搜索了对应的解决方案。 **方案一：在弹窗的时候，设置area只规定宽度，不设置高度，让插件自适应，**如下： layui.layer.open({ type:2, //此处只规定宽度，不规定高度，让插件自适应高度 area:['300px'], content:'www.baidu.com', shade:0.5, title:'百度页面

layer弹窗按钮样式和提示文字内容如何修改？

weixin_45390475的博客

06-19

332

btn: [“sure”, “cancel”], //修改按钮文字。btn: [‘sure’, ‘cancel’] //修改按钮文字。skin: ‘demo-class’, //自定义类名。layer.close(index) //关闭弹窗。layer弹窗按钮样式和提示文字内容如何修改？

layer.open 传入自定义的父元素高度

apanpan8126的博客

09-22

325

在使用 layer.open 方法弹出 Layer 弹窗时，通常情况下 Layer 会显示在当前视口的中央，而不会直接受到父元素高度的影响。但是，如果您希望自定义 Layer 弹窗的位置，以便它相对于某个特定父元素的高度进行定位，您可以使用 offset 参数来实现这一目标。在上面的示例中，我们首先获取了父元素的高度，然后计算了 Layer 弹窗的垂直偏移量 layerOffset，使其显示在父元素的中央位置。这个示例仅提供了一个基本的框架来实现自定义位置的 Layer 弹窗。

layer弹窗:top.layer弹窗到父页面跨域解决办法

05-15

在IT行业中，跨域问题是一个常见的挑战，尤其是在网页开发中，比如当我们在使用layer弹窗插件时，可能会遇到从子页面弹出一个窗口到父页面的情况。标题和描述所提及的是一个关于如何解决layer弹窗在跨域环境下的问题...

layer实现弹出层自动调节位置

10-16

在前端开发中，弹出层（弹窗、模态框等）是一个常用的功能组件，它用于在用户界面上提供额外的信息或者执行某些操作而不离开当前页面。由于页面内容的长度可能因不同的显示需求和场景而变化，这就要求弹出层能够根据...

layer.open的自适应及居中及子页面标题的修改方法

10-16

本篇文章将详细探讨如何利用layer.open实现弹窗的自适应、居中以及子页面标题的修改。首先，我们来了解 `layer.open` 的自适应功能。在动态生成的弹窗内容中，自适应是非常重要的，它确保弹窗可以适应不同的屏幕...

layer.open关闭父窗口以及调用父页面的方法

10-18

本篇文章将详细讲解如何使用 layer.open 创建弹窗，并在弹窗中关闭父窗口以及调用父页面的方法。首先，layer.open 是 layer.js 提供的一个核心方法，用于打开一个新的弹窗。其基本语法如下： ```javascript layer...

layer.js库

01-11

layer.js库，资源全；包含了css、js、图片等其他，下载解压，即可使用

layer插件的js文件

10-27

针对前端jsp中的弹窗的优化插件，layer插件，使弹窗更漂亮，更美化

layer.js,一个好用的弹出层

07-24

layer.js,,,一个好用的弹出层，废话不多说，为了凑够50个字

layer.js 下载

08-18

layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

layui中使用layer加载层，第一次默认360px，解决方法

codipy的博客

02-13

973

layui中使用layer加载层，第一次默认360px，后面再点击就会正常，查了文档，如下：由于我们的layer内置了轻量级加载器，所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时，你最好是将弹层放入ready方法中 layui.use('layer', function() { var layer = layui.layer; lay...

layer弹窗中的iframe页面根据其窗口伸缩大小自适应

qq_38418891的博客

07-01

5301

1.首先在layer.open中的resizing伸缩回掉函数中通过window[layero.find(‘iframe’)[0][‘name’]];找到iframe子页面dom对象,然后在通过layero获取当前layer对象中的layero[0].scrollHeight高度,然后通过iframe父页面向子页面传参的方式将scrollHeight高度传递给子页面,子页面将接收到的scrollH...

Layer.js——强大的弹出框

最新发布

09-15

layer.open 是一个常用的 JavaScript 弹窗插件，它可以通过调用 API 来创建模态框、消息框和页面层等类型的弹窗。如果你在 layer 弹窗中实现了一个确认操作，并希望在确认之后刷新父页面的表格，你可以通过以下步骤来实现： 1. 创建 layer 弹窗并设置好确认按钮的回调函数。 2. 在确认按钮的回调函数中编写刷新父页面表格的代码。这可以通过执行 JavaScript 的 `location.reload()` 方法来刷新整个页面，或者如果表格是通过 AJAX 异步加载的，则可以通过调用相应的 AJAX 请求函数来刷新表格数据。以下是一个简单的示例代码，展示了如何在 layer 弹窗确认后刷新父页面的表格： ```javascript // 假设有一个函数用于异步获取表格数据并更新DOM function refreshTableData() { // 这里是 AJAX 请求获取数据的代码 // 假设请求成功后，调用一个函数更新表格内容，比如：updateTableContent(data); } // 使用 layer.open 打开弹窗，并设置确认按钮的回调 layer.open({ type: 1, // 提示层 title: '确认操作', content: '确认要执行操作吗?', yes: function(index, layero) { // 执行确认后的操作 // 比如先进行某项数据的更新或者其他逻辑处理... // 确认后刷新表格数据 refreshTableData(); }, area: ['500px', '300px'] // 弹出层的大小 }); // 你的表格刷新函数，假设 AJAX 请求成功后会被调用 function updateTableContent(data) { // 更新表格 DOM 元素 // ... } // 注意：这里的 AJAX 请求和 DOM 更新代码需要你根据实际情况来编写。 ``` 请根据你的具体需求，编写相应的 AJAX 请求来获取表格数据，并更新页面中的表格 DOM 元素。记住在 AJAX 请求的成功回调中调用 `updateTableContent` 函数来更新页面的表格。