iframe,div弹出层问题我在iframe页面中有一个按钮，当点击按钮是弹出一个div层覆盖整个页面

答案:2 悬赏:30 手机版

解决时间 2021-12-03 22:40

提问者网友：未信
2021-12-03 14:57

最佳答案

五星知识达人网友：末日狂欢
2021-12-03 16:22

亲测可以的，如下：
test1.html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

test1

test2.html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

test2

当然这个代码也不是完整的一个遮罩效果代码，可能还有一点点浏览器兼容性问题存在。追问那这个弹出层就把iframe中的内容全部遮住了，我想要的是，弹出的层把整个父页面遮住，但还有一个message的div呢，这个也遮住了，这个有办法实现吗追答这个简单，正常的遮罩效果都是有一个不被挡住的div，我现在是做了个简单的。
在test1.html中加入下面的div：

这样这个div就在上面档不住了。追问可这个不遮住的div中的内容在iframe页面中啊追答这样的话就稍微麻烦点，要想不被挡住只能把这个div添加到父页面。
然后使用父页面调用子页面函数的方法来实现操作子页面。
iframe的父页面操作子页面网上很多的，找下就知道了。

全部回答

1楼网友：轻雾山林
2021-12-03 16:50

用iframe的话没有办法的。追问用别的有可以实现这种效果的？追答如下是可以的(注意用到的 top.document)：

test1.html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

test1</title><br /> </head><br /> <body><br /> <div id="ddd"><br /> <iframe width="200px" height="200px" src="test2.html"></iframe><br /> </div> <br /> </body><br /></html><br /><br />test2.html<br /><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><br /> <title>test2</title><br /> <script><br /> function show(){<br /> var div=top.document.createElement("div");<br /> <br /> div.style.width=top.document.documentElement.scrollWidth+"px";<br /> div.style.height=top.document.documentElement.scrollHeight+"px";<br /> <br /> div.style.backgroundColor="red";<br /> div.style.position="absolute";<br /> div.style.left=0;<br /> div.style.top=0;<br /> div.style.zIndex=9999;<br /> <br /> if(top.document.all)<br /> div.style.filter = "alpha(opacity=30)";<br /> else div.style.opacity = .3;<br /> alert(top.document.getElementById("ddd").id);<br /> top.document.getElementById("ddd").appendChild(div);<br /> }<br /> </script><br /> </head><br /> <body><br /> <input type="button" value="click" onclick="show()" /><br /> </body><br /></html></div>        <div class="s-title">我要举报</div> <div class="content-jubao">如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！ <mip-form method="post" url="https://m.zhsho.com/api/report.php?itemid=3976821&mid=10"> <div class="jubao"><input type="input" name="content" validatetarget="content" value="iframe,div弹出层问题我在iframe页面中有一个按钮，当点击按钮是弹出一个div层覆盖整个页面 "></div> <div class="jubao"><input type="input" name="type" value="不良信息"></div> <input type="submit" value="点此我要举报以上问答信息"> </mip-form> </div>   <div class="s-title">大家都在看</div> <div class="contact"> <table width="100%"> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/f3d989bb8259df7dc1e0561ce4d42448.html" target="_blank" data-title="数码宝贝有哪一集花仙兽究级进化了？">数码宝贝有哪一集花仙兽究级进化了？</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/71eec317ab346c2cbb62954378bb2907.html" target="_blank" data-title="十五边形外角和是________度．A.180B.360C.540D.720">十五边形外角和是________度．A.180B.360C.54</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/944ff3cd2f63dd74e2b492b07ec9e314.html" target="_blank" data-title="斑粥的做法步骤图，健脾消斑粥怎么做好吃">斑粥的做法步骤图，健脾消斑粥怎么做好吃</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/44ff994025e8c65758cb362847c8602b.html" target="_blank" data-title="台湾酵素有营业执照吗">台湾酵素有营业执照吗</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/b39884557cc0429f48c19c5a258a8ef3.html" target="_blank" data-title="小红家客厅的顶灯需要换灯泡。一只灯泡距离地面2.6m，爸爸身高1.8m，小红搬了一个高0.6m的凳">小红家客厅的顶灯需要换灯泡。一只灯泡距离地</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/85c87fd4d0d145b5c80907090fd0eb1d.html" target="_blank" data-title="公牛一开一控十孔插座明线怎么接，求解">公牛一开一控十孔插座明线怎么接，求解</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/da04677c5fa13be970943c103714471b.html" target="_blank" data-title="PT孩子我的成长1.271。。防资1606 体质5600 请问应该怎么加点？才是最理想的是龟速孩子">PT孩子我的成长1.271。。防资1606 体质5600 </a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/42f470c79c153a98176cb80d07282ff7.html" target="_blank" data-title="用杏花怎么美容">用杏花怎么美容</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/aff0c656d7ff5d0e0e9fd3404f0a4b5e.html" target="_blank" data-title="春节联欢晚会由中央电视台直播.算一算,谁先听到歌声?与舞台相聚25m的演播大厅里的观众，还是距北京2900km">春节联欢晚会由中央电视台直播.算一算,谁先听</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/311c6dc731f0d90fac017e3e8b902875.html" target="_blank" data-title="我用长沙银行跨行转账时候交易失败然后就这样说了 [P99999]营业准备期间不允许发生(nbpttr)的业务">我用长沙银行跨行转账时候交易失败然后就这</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/f6c43e230a41f572d83dd4b3eb47133a.html" target="_blank" data-title="为什么男朋友问我是真心喜欢他还是寂寞无聊才喜欢他，他什么意思呀">为什么男朋友问我是真心喜欢他还是寂寞无聊才</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/a9920abdb19a536815b8db41d9768386.html" target="_blank" data-title="下列光现象中，与其他三个现象形成原因不同的一个是A.水面倒影B.灯下影子C.墙上手影D.鸽子的影子">下列光现象中，与其他三个现象形成原因不同的</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/b8e019148e74b0c52e01574e01934142.html" target="_blank" data-title="小学生减免每学期33元，中学生每期减免67元，本学期该校共减免6635元，">小学生减免每学期33元，中学生每期减免67元，</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/08525d954e9f919c7a52e9fd4e0287d1.html" target="_blank" data-title="我们的政府是人民政府，要努力建设法治政府、责任政府和服务政府。这里的“建设法治政府”，就是要①用法律、法规规范政府行为②坚持依法行政，加强制度建设③加强道德建设，树立公仆意识④用法">我们的政府是人民政府，要努力建设法治政府、</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/2ace9b05e020483b03b53862abe3f94c.html" target="_blank" data-title="3吨消防车大约多少钱一辆">3吨消防车大约多少钱一辆</a></td> </tr> </table></div>      <div class="s-title">推荐资讯</div> <div class="contact"> <table width="100%"> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/40775d410d81a5ada584f6fb00cc3953.html" target="_blank" data-title="起诉书中忘了写要求判令被告方付诉讼费，起诉当天能加上要求吗？然后怎么操作呢？">起诉书中忘了写要求判令被告方付诉讼费，起诉</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/c5eca0d3757035d74e5c8325ea02546a.html" target="_blank" data-title="心あてにそれかとぞ见る白露の光そへたる夕颜の花日语翻译成中文是什么意思？可以说一下罗马音的">心あてにそれかとぞ见る白露の光そへたる夕</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/aef7d3e16bc17b5c2b45d15fe7094803.html" target="_blank" data-title="天门市干一高中好不好">天门市干一高中好不好</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/8e351a089b11e6437c26a5c8d49bdeb7.html" target="_blank" data-title="208除以18的竖式怎么列">208除以18的竖式怎么列</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/cacfd5ffc405faaf4eca228eb3864e35.html" target="_blank" data-title="谁能解释下电脑网线接口亮黄灯是什么意思">谁能解释下电脑网线接口亮黄灯是什么意思</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/1f09f6cd404420bde159a51004828f40.html" target="_blank" data-title="这是什么颜色？">这是什么颜色？</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/5df6f1087ccf4bf4a262843728bb0dbd.html" target="_blank" data-title="作文题目我的行李箱写150字">作文题目我的行李箱写150字</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/d62813aa6911c9b3c17a1963df41ee08.html" target="_blank" data-title="1200x2500米的木板等于几个400x400的木板">1200x2500米的木板等于几个400x400</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/08b7116584bfb78679f7201725120afc.html" target="_blank" data-title="双兴东区社区居委会办公位置在哪啊？好找么？">双兴东区社区居委会办公位置在哪啊？好找么？</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/ee5de36e9a2f6fc80c55a2d2d50581a0.html" target="_blank" data-title="汽车配件公司起名---中英文">汽车配件公司起名---中英文</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/299e489bbbd1b6205ea0599e466f1aa4.html" target="_blank" data-title="胚芽长0.5厘米可见心搏是什么意思">胚芽长0.5厘米可见心搏是什么意思</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/20fddcd32d095a30cd5f99dc4a34858f.html" target="_blank" data-title="Taobao is a popular online shopping website, varieties of items at low prices.A. provide">Taobao is a popular online shopping websit</a></td> </tr> </table><table width="100%"> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/508c37cc66ad7f2b48119b28f5de6e2c.html" target="_blank" data-title="正方形一边上任一点到这个正方形两条对角线的距离之和等于对角线长的 A：1/3 B:1/2 C:1/4 D:2倍">正方形一边上任一点到这个正方形两条对角线的</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/0b3ca78ea8ce3bb3d67f13092a35cf4b.html" target="_blank" data-title="阴历怎么看？">阴历怎么看？</a></td> </tr> </table></div>  </div>  <br> <div class="s-title-jubao"> <mip-form method="post" url="https://m.zhsho.com/api/report.php?itemid=3976821&mid=10"> <div class="jubao"><input type="input" name="content" validatetarget="content" value="iframe,div弹出层问题我在iframe页面中有一个按钮，当点击按钮是弹出一个div层覆盖整个页面 "></div> <div class="jubao"><input type="input" name="type" value="不良信息"></div> <input type="submit" value="如以上问答为侵权/违法等信息，可以点此举报!"> </mip-form> </div>   <div class="main"> <div class="head_footer"> <a href="https://mip.zhsho.com/">网站首页</a> | <a href="https://m.zhsho.com/about/about.html" rel="nofollow">关于我们</a> | <a href="https://m.zhsho.com/guestbook/" rel="nofollow">网站留言</a> </div> <div class="main_footer"> <a href="https://m.zhsho.com/about/contact.html" rel="nofollow">联系永发信息网</a><br> Copyright © 2024 <a href="https://mip.zhsho.com/">永发信息网</a> 版权所有 </div> </div>  <mip-fixed type="gototop"> <mip-gototop threshold='100'></mip-gototop> </mip-fixed> <mip-stats-baidu token="8c103b8e3599c6e1cffa7ec987eaa84b"></mip-stats-baidu> <script src="https://c.mipcdn.com/static/v2/mip.js"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js" async="async"></script> <script src="https://c.mipcdn.com/static/v1/mip-ad/mip-ad.js" async="async"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-lightbox/mip-lightbox.js" async="async"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-nav-slidedown/mip-nav-slidedown.js" async="async"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-share/mip-share.js" async="async"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-gototop/mip-gototop.js" async="async"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-history/mip-history.js" async="async"></script> <script src="https://c.mipcdn.com/static/v1/mip-scrollbox/mip-scrollbox.js" async="async"></script> <script src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js"></script> <script src="https://mipcache.bdstatic.com/static/v1.2/mip-form.js" async="async"></script> </body> </html>

iframe,div弹出层问题 我在iframe页面中有一个按钮，当点击按钮是弹出一个div层覆盖整个页面

iframe,div弹出层问题我在iframe页面中有一个按钮，当点击按钮是弹出一个div层覆盖整个页面