iframe页面嵌套把子页面的modal显示在父页面层级

最新推荐文章于 2024-12-26 15:01:43 发布

kksw1121

最新推荐文章于 2024-12-26 15:01:43 发布

阅读量399

点赞数 3

文章标签： javascript react typescript

本文链接：https://blog.youkuaiyun.com/qq_43225030/article/details/143673941

版权

使用iframe父页面嵌套子页面时，如果子页面有modal，默认modal的包裹范围是在子页面的body上，子页面有多大，modal的包裹就有多大，并且不能fixed，会随着鼠标滚动。

处理方法：将modal的body挂载在页面最外层的body中，我这里使用的是react ant-design modal，使用modal的getContainer属性
在这里插入图片描述

该属性值默认为document.body,即挂载在子页面的body上，把该属性的值设置为window.top.document.body即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kksw1121

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

多层嵌入式框架（iframe）使用总结

zhilunchen的专栏

09-22

3974

在Web开发过程中，为了提高页面架构层次的清晰性和灵活性，应对复杂的页面布局，使用嵌入式框架iframe可能是最有效的解决办法。如果布局比较复杂或页面层次较多，则可能会用到嵌套多层的iframe，然而iframe并不会根据页面高度自动调整自身高度，为了屏蔽滚动条提高视觉效果，就需要使用javascript代码使iframe自动调整高度。 1、单层情况，假设在A.aspx页面的某个

Bootstrap modal iframe

weixin_34356138的博客

12-03

695

完整的代码放在 jsFiddle https://jsfiddle.net/liam_lia... 借助Bootstrap，模态弹窗很容易实现，但还是有几个小问题要解决：让Bootstrap的Modal插件在浏览器中垂直居中。让弹窗中加载的IFrame铺满弹窗（不留白）。 IFrame正在加载内容时，显示“正在加载...”。保证弹...

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

antd modal层级混乱

lyn1772671980的博客

12-30

5132

【问题描述】有新增菜单、编辑菜单、图标选择三个modal框，其中，图标选择modal框是在新增菜单和编辑菜单 modal框上点击菜单选择框后弹出的公用的moda，点击几次后，图标 modal层级混乱，具体入下图【问题分析】菜单图标modal只创建一次，多次打开后，层级为第一次创建时的zIndex,导致层级没在最上层【解决方案】给modal加上一个key,每次打开菜单图标modal,都指定新的key=Math.random(),层级重新渲染 ...

给弹框el-dialog加个蒙层，不影响父级

最新发布

qq_58307541的博客

12-26

158

点击弹框按钮，刷新的时候。只给弹框加个蒙层

bootstrap:modal & iframe

weixin_30765319的博客

04-09

288

form提交绑定到特定的iframe & form的结果在dialog上显示 form：target属性  <form asp-controller="****" asp-action="**...

权限系统reademe.md文档---待整理

77今天也学习了的博客

11-05

1674

1,网页布局:使用ElementUI插件: 安装elementui npm/cnpm i element-ui -S/–save; 在main.js程序入口文件中完整引入elementui: import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; 使用它: Vue.use(ElementUI) 将登录页面写过来:点击登录，请求数据，处理数据,获取到token，有token，进入首页使用axios

iframe-modal:使用 iframe 跨浏览器模式

06-01

iframe-modal 工作正在进行中这个项目展示了如何让 iframe 表现得像一个模态。 iframe 垂直和水平集中。模态后面有一个透明遮罩（在 iframe 内）。它处理ios8“位置：固定”问题。在 iOS8（Safari 和 Chrome）、android 4.4.4（Chrome）和 Linux/MacOS（Chrome 和 Safari）上测试去做：非 SPA 案例的 iframe 导航上的灯箱闪烁案例：容器内的模态，而不是绝对位置

iframe嵌入父子项目，外层框架（用父框架左侧菜单，子框架左侧菜单隐藏iframe嵌入父框架）

wwf1225的博客

05-22

630

/script>

用Bootstrap框架弹出的模态框modal里面有个iframe页面，怎么在操作完 iframe里面的内容后，关闭模态框modal

x2826436174的博客

06-03

875

使用 window.parent.$(".modal").modal("hide");

asp.net iframe html,ASP.NET中使用IFRAME建立类Modal窗口

weixin_29009501的博客

06-19

319

我们经常要在程序的人机交互中用到模态窗口，但在B/S开发中，这一切变得不容易了，虽然也可以用window.showModalDialog函数实现(见http://dotnet.aspx.cc/ShowDetail.aspx?id=49ML4AO8-5PB3-4KNY-NJZD-LJOIOXV4M1X4)，但多数用起来麻烦，还要为了回传值用Frameset建立2个无用的窗口。不爽！我发现可以尝试在初...

model框中嵌套iframe子页面

丷寒枫丷

09-13

1858

<%-- 点击按钮弹出model框 --%> <button id="btnshow" class="CssClass="btn btn-primary"></button> <%-- bootstrap的model框使用iframe嵌套子页面 --%> <div id="modelID" class=&quo

bootstrap modal多层使用小结

qq_21875331的博客

01-09

2118

bootstrap modal 弹出框在开发中使用是很平常的，最近在使用的时候遇到些小问题，问题如下： 1、比如两个modal,modal A先弹出，在modal A上单击按钮弹出modal B，modal A的内容多于modal B并且modal A带有滚动条，在modal B关闭的时候，modal A的滚动条消失了，导致页面不能用，解决方案如下：添加全局样式： .modal{over...

ant design——Modal

JIN-BOSS的博客

04-23

3197

用ant design中的Modal有一段时间了，就我使用的一些API进行简单总结blablablabla… Modal关闭时卸载组件 <Modal title={null} //模态框的标题 className={this.state.modalClass} //采用自定义类名，这样重写模态框样式的时候不至于影响其他模态框样式 visible={this.state...

通过子界面（iframe中的）对父界面（框架界面）的弹框进行控制。

man190228462的专栏

08-10

1256

用到的知识点： iframe的调用包括以下几个方面：（调用包含html dom，js全局变量，js方法）主页面调用iframe； iframe页面调用主页面；主页面的包含的iframe之间相互调用；主要知识点 1：document.getElementById("ii").contentWindow 得到iframe对象后，就可以通过conten

Vue Antd控件弹出对话框，父子组件传值

qiulei_21的专栏

11-30

2254

编写vue中，父组件和子组件相互传值以及弹出对话框的代码

element-ui dialog 嵌套

qq_37309987的博客

07-16

401

dialog 内部嵌套 dialog，内层的 dialog 层级显示会遮罩在内容的 dialog 内容区域之上，内层 dialog 添加 append-to-body 属性即可，如官方文档：

关于antd modal组件使用的一些新得

leixiang126的博客

03-18

8473

首先我在用modal组件的时候先把modal组件又封了一层，代码 import React, { Component } from 'react'; import { observer, inject } from 'mobx-react'; import cx from 'classnames' import { Modal } from 'antd'; import './index.l...

bootstrap modal iframe

Jalen备忘录

03-06

1786

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https

模态窗口关闭触发父页面刷新的js实现方法

此外，如果模态窗口是由iframe嵌套的，则可能需要使用`window.frameElement.contentWindow.location.reload()`来刷新iframe内的页面，而不是整个父页面。 #### 5. 注意事项 - 刷新父页面会清除用户在父页面上进行...