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

谁借莪１个温暖的怀抱￠ 2022-12-27 12:51 174阅读 0赞

**注:前端选用的框架是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 class="Tbtext">英文姓:</td>
                        <td><input id="ELAST_NAME" /></td>
                        <td class="Tbtext"> 英文名:</td>
                        <td><input id="EFIRST_NAME" /></td>
                    </tr>
    
                    <tr style="display: block;margin-top:5px;">
                        <td class="Tbtext">特殊姓:</td>
                        <td><input id="SPECIAL_LAST_NAME" /></td>
                        <td class="Tbtext">特殊名:</td>
                        <td><input id="SPECIAL_FIRST_NAME" /></td>
                    </tr>
                    <tr style="display: block;margin-top:5px;">
                        <td class="Tbtext">航信姓:</td>
                        <td><input id="TRAVELSKY_LAST_NAME" /></td>
                        <td class="Tbtext">航信名:</td>
                        <td><input id="TRAVELSKY_FIRST_NAME" /></td>
                    </tr>
    
                    <tr style="display: block;margin-top:5px;">
                        <td>证件类型:</td>
                        <td>
                            <select id="CERTIFICATE_TYPE" required="required" ; class="easyui-combobox" name="dept" prompt="请选择" style="width:150px; height:26px;">
                                <option value="IDCARD">身份证</option>
                                <option value="PASSPORT">护照</option>
                                <option value="OTHER">其它</option>
                            </select>
                        </td>
                        <td>证件号码:</td>
                        <td><input id="CERTIFICATE_NUMBER" /></td>
                    </tr>
                    <tr style="display: block;margin-top:5px;">
                        <td>手机号码:</td>
                        <td><input id="MOBILE" /></td>
                        <td class="Tbtext">EMAIL:</td>
                        <td><input id="EMAIL" /></td>
                    </tr>
    
    
                </table>
            </form>
        </div>

子级：

parent.$('#applyAdd').dialog({ 
            title: '新增',
            iconCls: 'icon-add',
            height: 320,
            width: 510,
            modal: true,
            left: (document.documentElement.clientWidth - 510) * 0.5,
            top:5,
            toolbar: [{ 
                text: '保存',
                id: "SavebtnAdd",
                iconCls: 'icon-save',
                handler: function () {