iframe 嵌套页面（模态框中嵌套）

需求：

点击新增 弹出另一个系统页面，进行操作

代码：

html:

 <button type="button" class="btn btn-primary btn-sm" id="addRuleSeletedBtn">新建</button>

<div class="ruleModal hide">
    <iframe style="100%;height:100%" id="ruleModalIfram" src=""></iframe>
    <button type="button" class="btn btn-primary btn-md" id="backRule"
            style="background: #1989FA;border: #1989FA; margin: 10px; 200px;">返回</button>

</div>

<div class="shade hide">
</div>

css:

    .hide{
        display:none;
    }

    .ruleModal{
        position:fixed;
        left:0;
        top:0;
        right:0;
        bottom:0;
        /*900px;*/
        /*height:500px;*/
        /*margin-left:-450px;*/
        /*margin-top:-250px;*/
        z-index:10;
        background-color:white;
        overflow: auto;
        text-align: center;
    }

    .shade{
        position:fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
        background-color:rgba(0,0,0,0.6);
        z-index:9;
    }

js：

点击新增按钮 获取 地址及 通往另一个系统的 token 通行证，并给iframe src属性赋值

    //新增规则
    $('#addRuleSeletedBtn').on('click',function(){
        $('.hide').removeClass('hide'); // 打开模态框
        $.ajax({
            "url": path + "XXXXXX",
            "type": "POST",
            success: function (data) {
                // window.location.href=data;
                var dataSrc = data+'&page=XXXX&system=XXXX'
                $('#ruleModalIfram').attr('src',dataSrc)

            }
        });
    })

    $('#backRule').on('click',function(){
        $('.ruleModal,.shade').addClass('hide'); // 点击返回隐藏模态框
        initEventRule()
    })