寻知图教师端---知识点统计功能用到了遮罩弹出框,页面用到了ifram 。因此出现了子页面调用父页面遮罩的问题。
实现过程如下:
1、在父页面添加遮罩和窗体标签
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div class="theme-popover-mask"></div> 2 3 <!-- 表格弹出框 --> 4 <div class="theme-popover"> 5 <div class="theme-poptit"> 6 <a href="javascript:;" title="关闭" class="close" id="a_closeWin"><img 7 src="img/close_03.jpg"></a> 8 <h3 id="pop_h3_tit">一元二次方程—入门学生名单(31人)</h3> 9 </div> 10 <div class="theme-popbod"> 11 <div id="pop_div_stu"> 12 <span>张三</span><span>张王三</span><span>张刘三</span><span>张赵三</span><span>张我三</span> 13 </div> 14 <button id="btn_close" class="btn-close">关闭</button> 15 </div> 16 </div>
2、在子窗体中设置标签显隐
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 //显示遮罩函数 2 function showMaskStuName() { 3 $('.theme-popover-mask', parent.document).fadeIn(100); 4 } 5 //隐藏遮罩函数 6 function hideMaskStuName() { 7 $('.theme-popover-mask', parent.document).fadeOut(100); 8 }
此时,引出一个问题,子页面和父页面相互调用标签和方法:
I 子页面调用父页面标签:
当前使用的子页面调用父页面标签的方式是:
A、$('.theme-popover-mask', parent.document)
经网页查询,还有其他方法
B、window.parent.document.getElementByIdx_x("元素id");
前端同事给出的方法:
C、window.parent.$('.theme-popover')
1 //弹框关闭 2 window.parent.$('.theme-poptit .close').click(function(){ 3 window.parent.$('.theme-popover').slideUp(200); 4 window.parent.hideMask(); 5 }) 6 window.parent.$(".btn-close").on("click",function(){ 7 window.parent.$(".theme-poptit .close").trigger("click"); 8 });
II 子页面调用父页面方法:
A、window.parent.func();
III 父页面调用子页面标签:
A、$("#objid",document.frames('iframename').document)
B、window.frames["iframe_ID"].document.getElementByIdx_x("元素id");
参考文章:jquery、js调用iframe父窗口与子窗口元素的方法整理
有待补充的;ifram子页面和父页面交互的文章