dialog弹出的界面显示在父级（不局限于Iframe中）跳出Iframe显示

最新推荐文章于 2021-03-11 18:16:19 发布

沧海·

最新推荐文章于 2021-03-11 18:16:19 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_45286744/article/details/111031166

版权

本文介绍如何使使用easyUI的dialog弹出层不在Iframe内显示，而是扩展到整个页面。首先，将dialog HTML放在父级页面，并保持初始隐藏状态。接着，在Iframe中的JavaScript代码中通过`parent.`引用父级的对话框元素进行控制。最后，通过子级的JS实现弹出和操作。

摘要由CSDN通过智能技术生成

注:前端选用的框架是easyUI
昨天遇到一个小bug,在界面中的Iframe里的界面弹出的框只存在于Iframe中，我想让他显示在整个界面里，来操作
首先思想梳理
1.第一步我们要明确想让他在父级中展示就应该吧弹出的框的HTML代码写在父级的前端代码中(默认关闭状态，不显示)
2.第二步在Iframe中的界面JS中调用父级的控件。用parent.定位父级的DIV
3.显示出来后JS的执行代码在也在子级中
父级：

@* 新增 *@
    <div id="applyAdd" class="easyui-dialog" style="padding: 10px; overflow-x: hidden">

        <form id="AddExtract" method="post">
            <table>
                <tr style="display: block;margin-top:5px;">
                    <td class="Tbtext">中文姓:</td>
                    <td><input id="CLAST_NAME" /></td>
                    <td class="Tbtext"> 中文名:</td>
                    <td><input id="CFIRST_NAME" /></td>
                </tr>
                <tr style="display: block;">
                    <td