关于在使用iframe之后子页面中如何在父级弹窗的问题的具体实现

近期 在群中有一个网友总是在纠结这个问题,很多朋友也给出了解决方法,可能不是很深入而该网友的经验可能还差那么一点点。所以我决定为了摆脱其无休止的“纠缠”,就写了小例子给他,现在跟大家分享下,有遇到这种情况的朋友可以参考下,下面是具体实现过程

首先在首页也就是父页面中加一个空DIV容器。如:<div id="pwin"></div>

子页面中的内容如下:

html:

  <input type='button' id="btna" value="在父级弹出窗口" >


<div id="d" style="display:none;">
    <input type="text" name=""><br>
<input type="text" name="">
<input type="submit" value="提交">
</div>

js:

var $parent = self.parent.$;
	  $(function(){
		$('#btna').click(function(){
			$parent('#pwin').window({
				modal:true,
				width:300,
				height:200,
				content:$('#d').html(),
				title:'父级窗口'
			});

		})
	  })

到这里就结束了,简单吧,其实大家在做时候会发现,如果页面中要操作的表单很多,这样页面中就会出现很隐藏的DIV,页面看起来很零乱,所以大家可以表单中的HTML放单独的HTML文件中,利用window的href属性加载表单,这样一来,页面就清晰很多了,大至代码会像下面这样:

var $parent = self.parent.$;
	  $(function(){
		$('#btna').click(function(){
			$parent('#pwin').window({
				modal:true,
				width:300,
				height:200,
				href:'xxxx.html',
				title:'父级窗口',
				onLoad:function(){
					//在此加入表单初始化的相关代码。
				}
			});

		})
	  })

在使用的过程中遇到问题,欢迎大家到群中讨论。有不当之处还望指出。

转载请注明出处
撰写人:疯狂秀才 http://hxling.cnblogs.com
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值