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. 你可以通过捐 ...
随机推荐
- Codeforces 229E Gifts 概率dp (看题解)
Gifts 感觉题解写的就是坨不知道什么东西.. 看得这个题解. #include<bits/stdc++.h> #define LL long long #define LD long ...
- JS元素意外点击元素消失
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- BZOJ3286 Fibonacci矩阵 矩阵 快速幂 卡常
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ3286 题意概括 n,m,a,b,c,d,e,f<=10^1000000 题解 神奇的卡常题目 ...
- docker下搭建zipkin for mysql
docker pull openzipkin/zipkin 新建docker-compose.yml加入以下内容,自行修改. version: ' services: # The zipkin pro ...
- IDEA添加源码包
1.在项目中选中左上角的File--->Project Structure 2.选择需要添加的源码包 3.源码已经加入
- POJ 1979 红与黑
题目地址: http://poj.org/problem?id=1979 或者 https://vjudge.net/problem/OpenJ_Bailian-2816 Red and Blac ...
- Python3.4+Django1.9+Bootstrap3
实现和原理 Python集成Django开发框架后,可以通过在cmd命令提示符下建立工程,工程名为learn_models 1 django-admin.py startproject learn_m ...
- JavaEE 之 Spring(三)
1.Spring Web MVC a.定义:是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是 ...
- vue-cli之打包多入口配置
在使用vue-cli初始化vue项目时,默认打包为单入口,有时候一个项目可能会有不同入口,在这种情况下,就需要我们稍微修改下webpack配置文件了,具体步骤如下: 1.修改webpack.base. ...
- ReentrantLock和condition源码浅析(一)
转载请注明出处..... 一.介绍 大家都知道,在java中如果要对一段代码做线程安全操作,都用到了锁,当然锁的实现很多,用的比较多的是sysnchronize和reentrantLock,前者是ja ...