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

来源：互联网发布：淘宝16年扣24分编辑：程序博客网时间：2024/05/13 00:05

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

子页面中的内容如下：

html:

  <inputtype='button'id="btna"value="在父级弹出窗口">
 
 
<divid="d"style="display:none;">
    <inputtype="text"name=""><br>
<inputtype="text"name="">
<inputtype="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(){
                    //在此加入表单初始化的相关代码。
                }
            });
 
        })
      })