码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-09-12 14:15:45      阅读:801      评论:0      收藏:0      [点我收藏+]

标签:

父页面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监听器

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代码:

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

 

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

标签:

原文地址:http://www.cnblogs.com/tomcatandjerry/p/5864429.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!