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

注:前端选用的框架是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 () {
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值