本文灵感来自:http://www.cnblogs.com/chengxuyuanzhilu/p/5132328.html

子页面内容

    //打开模态框
function openMySelectModiaOrPackageModal(){
var fatherBody = $(window.top.document.body);
//定义页面存放模态窗口的元素
var id = 'iframeModalPages';
var dialog = $('#' + id);
if (dialog.length == 0) {
dialog = $('<div class="modal fade" role="dialog" id="' + id + '">'+$('#mySelectMediaOrPackageModal').html()+'</div>');
dialog.appendTo(fatherBody);
}
//加载
dialog.load("model.html", function() {
dialog.modal({
backdrop: false
});
});
}

子页面modal

<div class="modal fade bs-example-modal-lg" tabindex="-1" id="mySelectMediaOrPackageModal" role="dialog" aria-labelledby="mySelectMediaOrPackageModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<ul class="nav nav-tabs _yh_modal_content_title">
<li class="active">
<a href="#mySelectMedia" data-toggle="tab">
<h4 class="modal-title" id="mySelectMediaPanel">
选择1
</h4>
</a>
</li>
<li>
<a href="#mySelectPackage" data-toggle="tab">
<h4 class="modal-title" id="mySelectPackagePanel">
选择2
</h4>
</a>
</li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="mySelectMedia">
<p>菜鸟教程是一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术,更是梦想。</p>
</div>
<div class="tab-pane fade" id="mySelectPackage">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div>
</div>
</div>

绑定子页面触发按钮

 $("#_cx_modiaOrPackageS").click(function(){
openMySelectModiaOrPackageModal();
});

bootstrap3-iframe-modal子页面在父页面显示模态框的更多相关文章

  1. jquery读取iframe子页面和父页面的处理

    1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...

  2. iframe子页面调用父页面javascript函数的方法

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...

  3. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  4. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  5. 在子页面操作父页面元素和iframe说明

    实现功能:在子页面操作父页面元素. 在实际编码的过程中,大家一定有这种需求:在父级页面有一个<iframe scrolling='auto'></iframe>内联框架,而我们 ...

  6. iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素

    一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...

  7. 子窗口访问父页面iframe中的iframe,top打开的子窗口访问父页面中的iframe中的iframe

    子窗口访问父页面iframe中的iframe 子窗口访问最顶层页面中的iframe中的iframe top打开的子窗口访问父页面中的iframe中的iframe top打开的子窗口访问最顶层页面中的i ...

  8. iframe子页面获取父页面元素的方法

    在iframe子页面获取父页面元素 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: $("#objid" ...

  9. layui type:2 iframe子页面向父页面传值

    需求: 选择子页面表格中的radio或者双击该行,得到的该行数据传到父页面,由父页面渲染. 网上的各种方法都用了,父页面就是获取不到子页面传的值,过了一晚上,睡了一觉,柳暗花明又一村. layui t ...

  10. AppBox v6.0中实现子页面和父页面的复杂交互

    前言 1. AppBox是捐赠开源(获取源代码至少需要捐赠作者 1 元钱),基于的 FineUI(开源版)则是完整开源,网址:http://fineui.codeplex.com/ 2. 你可以通过捐 ...

随机推荐

  1. Python 私有属性

    #!/usr/bin/env python # -*- coding:utf-8 -*- # 作者:Presley # 邮箱:1209989516@qq.com # 时间:2018-08-05 # 类 ...

  2. Badboy录制Jmter脚本

    提纲 1.特性和用途 2.下载和安装 3.界面介绍 4.录制脚本(注意:badboy默认是打开就开始录制,需要在step双击后进行取消默认设置) 5.添加断言(参数化设置,注意:badboy默认只运行 ...

  3. 反向传播算法(前向传播、反向传播、链式求导、引入delta)

    参考链接: 一文搞懂反向传播算法

  4. SSL/TLS

    為 授权计算机为 SSL/TLS 安全通道建立信任关系. ServicePointManager.ServerCertificateValidationCallback += (o, c, ch, e ...

  5. 【LeetCode算法-20】Valid Parentheses

    LeetCode第20题 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determin ...

  6. hdu1285 确定比赛名次【拓扑排序】

    题目链接 确定比赛名次                                         Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  7. HDU 1710 (二叉树的前序和中序,求后序)

    题目链接 题目大意: 输入二叉树的前序.中序遍历,请输出它的后序遍历 #include <stdio.h> #include <string.h> ; // 长度为n s1 前 ...

  8. Oracle内置存储过程之DBMS_OUTPUT

    1.DBMS_OUTPUT 1.1 作用: 调试PL/SQL程序 1.2 相关函数: 命令 作用 备注 enable 在serveroutput on的情况下,用来使dbms_output生效(默认即 ...

  9. BZOJ-1- 4868: [Shoi2017]期末考试-三分

    三分出成绩时间,假设当前出成绩最优,那么提前就会调增老师,增加不愉快度多于少等待的:如果延迟时间. 那么等待更久,增加的不愉快度也将多余少调增剩省下的. 于是:对于当前点,两边都是有单调性的. 就是说 ...

  10. react 15.5版本的警告问题

    一.问题描述 前几天从git上拉下一个项目,cnpm i 安装依赖,项目跑起来后,发现有两个警告.之前这个项目都好好的,怎么突然报错了? Warning: Accessing PropTypes vi ...