zoukankan      html  css  js  c++  java
  • 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监听器

    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_), '*');
    
  • 相关阅读:
    批量修改图片尺寸
    批量修改文件名
    C++ 字符串的编码
    Hanoi问题
    农夫过河问题
    遍历文件夹中所有图片
    仿射变换和透射变换
    程序局部性原理
    14年年底的学习计划
    linux之Vim使用
  • 原文地址:https://www.cnblogs.com/tomcatandjerry/p/5864429.html
Copyright © 2011-2022 走看看