1. 程式人生 > 實用技巧 >iframe 巢狀頁面(模態框中巢狀)

iframe 巢狀頁面(模態框中巢狀)

需求:

點選新增 彈出另一個系統頁面,進行操作

程式碼:

html:

 <button type="button" class="btn btn-primary btn-sm" id="addRuleSeletedBtn">新建</button>
<div class="ruleModal hide">
    <iframe style="width: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;width: 200px;">返回</button> </div>
<div class="shade hide">
</div>

css:

    .hide{
        display:none;
    }
    .ruleModal{
        position:fixed;
        left:0;
        top:0;
        right
:0; bottom:0; /*width: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()
    })