JBOSS 点滴

丰丰的博客

Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

父页面bootstrap模态框:

复制代码
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"      aria-labelledby="myModalLabel" aria-hidden="false" >     <div class="modal-dialog modal-lg">         <div class="modal-content">             <iframe style="zoom: 0.8;" height="700px" src="" frameBorder="0" width="99.6%"></iframe>         </div><!-- /.modal-content -->     </div><!-- /.modal --> </div>
复制代码

父页面js代码 :增加message监听器

1
2
3
4
5
6
7
8
9
10
11
function openModal(){
    $('iframe').attr("src","http://localhost:8080/test/corsPage.html");
    $('#myModal').modal({backdrop:false});//false:表示单击模态框以外区域不关闭模态框
}
window.addEventListener('message', receiveMessage, false);
function receiveMessage(evt) {
    var taskData = $.parseJSON(evt.data);
    if(taskData.opt=="C"){
        $("#myModal").modal("hide");
    }
}

子页面corsPage.html,跨域/单独的页面(iframe打开,跟父页面无关),
如何关闭模态框/传值给父页面, JS代码:

1
2
var data_ = {"opt":"C"};//Close/Hide modal
window.parent.postMessage(JSON.stringify(data_), '*');

 

posted on 2019-05-28 21:23 半导体 阅读(20) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航: