zoukankan      html  css  js  c++  java
  • 在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);
    

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

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

  • 相关阅读:
    Mongodb 的ORM框架 Morphia之注解
    Redis主从集群及哨兵模式
    Dubbo
    Zookeeper
    使用Dockerfile自定义一个包含centos,tomcat的镜像
    linux/centOS 下安装 ngnix
    Session共享
    Linux安装jdk.18和tomcat8
    MongoDB集群的搭建
    多态--方法重写的三个要点
  • 原文地址:https://www.cnblogs.com/xlhblogs/p/2364456.html
Copyright © 2011-2022 走看看