在ifram中动态改变某个弹出层的位置的解决方法

想做一个弹出层用于提交回复信息的对话框,页面包含在一个ifram中。

思路有两种,第一种通过设置position属性为fixed,然后固定高度就可以了。但是由于页面包含在一个ifram中,所以虽然设置了position:fixed,但是没有任何效果,而且position:fixed在ie中也不适用。

第二种,通过onscroll事件动态改变div的位置。本想通过 scrollTop属性获取滚动条距离上边距的距离,但是还是那个蛋疼的问题,这个页面是存在于一个ifram中,onscroll事件是又包含ifram元素的页面来触发的。所以,要实现这个效果的关键就是如何通过获取获取父框架中滚动条距离上边框的距离。即如何获得父框架的scrollTop。

这里我通过在父框架中设置一个隐藏的div用于存放父框架通过触发onscroll事件来获得的scrollTop的高度,然后将获取到的高度保存到div中,在ifram页面中获取这个隐藏的div的高度就行了。

代码如下:

将获取到的高度保存到一个隐藏的div中  
      window.onscroll = function () {
            $("#data").css("height",$(this).scrollTop());
        }
在嵌套的页面中找寻隐藏div中保存的数据
        var cdoc = document.getElementById("toclone");
        var doc = $(window.parent.document.body);
        $("#toclone").css("top", doc.find("#data").height() + cdoc.offsetHeight);

 这样就可以动态改变弹出层的位置了

下面是元素的一些宽高的讲解:

 

posted @ 2012-02-23 11:10  kuangkro  阅读(1822)  评论(0编辑  收藏  举报