bootstrap3-iframe-modal子页面在父页面显示模态框
本文灵感来自: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子页面在父页面显示模态框的更多相关文章
- jquery读取iframe子页面和父页面的处理
1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...
- iframe子页面调用父页面javascript函数的方法
1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
- 使用iframe父页面调用子页面和子页面调用父页面的元素与方法
在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...
- js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...
- 在子页面操作父页面元素和iframe说明
实现功能:在子页面操作父页面元素. 在实际编码的过程中,大家一定有这种需求:在父级页面有一个<iframe scrolling='auto'></iframe>内联框架,而我们 ...
- iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素
一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...
- 子窗口访问父页面iframe中的iframe,top打开的子窗口访问父页面中的iframe中的iframe
子窗口访问父页面iframe中的iframe 子窗口访问最顶层页面中的iframe中的iframe top打开的子窗口访问父页面中的iframe中的iframe top打开的子窗口访问最顶层页面中的i ...
- iframe子页面获取父页面元素的方法
在iframe子页面获取父页面元素 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: $("#objid" ...
- layui type:2 iframe子页面向父页面传值
需求: 选择子页面表格中的radio或者双击该行,得到的该行数据传到父页面,由父页面渲染. 网上的各种方法都用了,父页面就是获取不到子页面传的值,过了一晚上,睡了一觉,柳暗花明又一村. layui t ...
- AppBox v6.0中实现子页面和父页面的复杂交互
前言 1. AppBox是捐赠开源(获取源代码至少需要捐赠作者 1 元钱),基于的 FineUI(开源版)则是完整开源,网址:http://fineui.codeplex.com/ 2. 你可以通过捐 ...
随机推荐
- HDU5117 Fluorescent 期望 计数 状压dp 动态规划
原文链接https://www.cnblogs.com/zhouzhendong/p/HDU5117.html 题目传送门 - HDU5117 题意 $T$ 组数据. 给你 $n$ 盏灯 ,$m$ 个 ...
- Unknown lifecycle phase "mvn"
Unknown lifecycle phase "mvn" maven执行命令错误 : 执行输入命令即可,不需要添加 mvn 此处不需要写mvn,而是执行写compile就行,否 ...
- Oozie
Oozie的功能模块 workflow 由多个工作单元组成 工作单元之间有依赖关系 MR1->MR2->MR3->result hadoop jar:提交1个MR oozie:监控当 ...
- 069 在SparkStreaming的窗口分析
一:说明 1.图例说明 ---------------------------------------------------------------------------------------- ...
- PAT (Basic Level) Practise - 继续(3n+1)猜想
题目链接:https://www.patest.cn/submissions/4414905 1005. 继续(3n+1)猜想 (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限 ...
- springboot拦截器中获取配置文件值
package com.zhx.web.interceptor; import com.zhx.util.other.IpUtil; import org.slf4j.Logger; import o ...
- POJ 3275 Ranking the Cows(传递闭包)【bitset优化Floyd】+【领接表优化Floyd】
<题目链接> 题目大意:FJ想按照奶牛产奶的能力给她们排序.现在已知有N头奶牛$(1 ≤ N ≤ 1,000)$.FJ通过比较,已经知道了M$1 ≤ M ≤ 10,000$对相对关系.每一 ...
- Django项目中使用Redis
Django项目中使用Redis DjangoRedis 1 redis Redis 是一个 key-value 存储系统,常用于缓存的存储.django-redis 基于 BSD 许可, 是一个使 ...
- js小函数工具
突然想到建一片文章关于自己所学到的一些小函数,今后需要的时候可以直接当工具使用. 1.获取当前时间小程序. function showTime(){ var show_day=new Array('星 ...
- es6那些事儿
一.参考链接 http://www.ecma-international.org/ecma-262/6.0/index.html http://www.ecma-international.org/e ...