layer ifram 彈出框


父層

<div class="col-xs-4 text-left" style="padding-left: 50px;"><button type="button" class="btn btn-success" onclick="addCategory();">添加</button></div>

點擊添加,按鈕,執行添加方法

復制代碼
function addCategory() {
    layer.open({
        title:'<img src="{sh::RES}image/add.gif">&nbsp;添加分類', type: 2, area: ['700px', '530px'], fix: false, //不固定 maxmin: true, content: '{sh::U("Mall/editcategory")}', success:function(layero,index){ }, end:function(){ var handle_status = $("#handle_status").val(); if ( handle_status == '1' ) { layer.msg('添加成功!',{ icon: 1, time: 2000 //2秒關閉(如果不配置,默認是3秒)  },function(){ history.go(0); }); } else if ( handle_status == '2' ) { layer.msg('添加失敗!',{ icon: 2, time: 2000 //2秒關閉(如果不配置,默認是3秒)  },function(){ history.go(0); }); } } }); }
復制代碼

這個方法,打開一個iframe頁面,頁面中可以執行一些操作,添加分類,執行完畢后調用一個end方法。這個方法,很有用!

不管執行結果如果,都會調用。

iframe可以傳遞參數到父頁面。

end方法,根據傳遞的結果,執行一些后續操作。

 

 

iframe層

復制代碼
<div class="content"> <form action="" method="post" id="myform" enctype="multipart/form-data"> <div class="form-group row"> <div class="left col-xs-3 text-right"> <label for="">名稱:</label> </div> <div class="right col-xs-8 text-left"> <input type="text" class="form-control" id="name" name="name" placeholder=""> </div> </div> <div class="form-group row"> <div class="left col-xs-3 text-right"> <label for="">類別:</label> </div> <div class="right col-xs-8 text-left"> <input type="text" class="form-control" id="name" name="name" placeholder=""> </div> </div> <div class="form-group row"> <div class="left col-xs-3 text-right"> <label for="">圖標:</label> </div> <div class="right col-xs-8 text-left"> <input type="file" id="logo" name="logo"> </div> </div> <div class="form-group row"> <div class="left col-xs-3 text-right"> <label for="">啟用:</label> </div> <div class="right col-xs-8 text-left"> <input name="status" type="checkbox" checked="checked"> 啟用 </div> </div> <div class="form-group text-center submit"> <button type="submit" class="btn btn-primary ">提交</button> </div> </form> </div>
復制代碼

表單提交,提交到后台(表單提交,刷新iframe層頁面)

復制代碼
<script type="text/javascript"> var index = parent.layer.getFrameIndex(window.name); var success = '{sh:$success}'; if ( success == '1' ) { parent.$("#handle_status").val('1'); parent.layer.close(index); } else if( success == '2' ) { parent.$("#handle_status").val('2'); parent.layer.close(index); } </script>
復制代碼

收到執行的結果,success,成功是1,失敗是2。執行相應的操作。也就是,

傳值+關閉iframe層。

 

父層有一個隱藏的元素,專門用來接收傳值的

<input id="handle_status" value="" hidden="hidden">

流程很清晰。

layer很牛逼!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM