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. 你可以通过捐 ...
随机推荐
- 查看当前的app运行的是哪个Activity
1.确认手机连接了adb-->检查方式:adb devices 2.手机运行任意app,随意进入一个页面 3.此时cmd运行:adb shell "dumpsys window | g ...
- Ajax+PHP实现异步上传多张图片
Ajax+PHP实现异步上传多张图片 HTML代码 <!-- date: 2018-04-27 13:46:55 author: 王召波 descride: 多张图片上传 --> < ...
- 012 pandas与matplotlib结合制图
这里以后再补充. 1.折线图
- Nginx的配置安装和使用
http://blog.csdn.net/e421083458/article/details/30086413 以后继续更新
- multiprocssing,threading,多进程多线程初识
1. multiprocessing 多进程: import multiprocessing p = multiprocessing.Process(target = func,name = &quo ...
- poj 3694 Network 【Tarjan】+【LCA】
<题目链接> 题目大意: 给一个无向图,该图只有一个连通分量.然后查询q次,q < 1000, 求每次查询就增加一条边,求剩余桥的个数. 解题分析: 普通的做法就是在每加一条边后,都 ...
- 前后端通过API交互
前两篇已经写好了后端接口,和前段项目环境也搭建好了 现在要通过接口把数据展示在页面上 先占位置写架子 创建一个头部组件和底部组件占位置 <template> <h1>这是头部组 ...
- ppt字体
字体也需要设计. 太大众不太好. ppt自带的字体样式 有毛笔风格的.vrinda. 其他的和这个字体样式差不多.选其中一个就可以了. 其他的个性样式就需要下载字体扩展了.作为经常做ppt的,还 ...
- BZOJ.3938.Robot(李超线段树)
BZOJ UOJ 以时间\(t\)为横坐标,位置\(p\)为纵坐标建坐标系,那每个机器人就是一条\(0\sim INF\)的折线. 用李超线段树维护最大最小值.对于折线分成若干条线段依次插入即可. 最 ...
- Linux服务部署--Java(一)
网络配置 一.配置dns 1.修改/etc/NetworkManager/NetworkManager.conf 文件,在main部分添加 “dns=none” 选项: 2.NetworkManage ...