峰北红 2011-08-13 13:27
浏览 279
已采纳

关于DIV在浏览器中定位的问题

:) 首先,我已经查了好多资料,当打开网页时一个单独的浮动窗口DIV可以显示在浏览器的正中了。
但是问题是,如果我改变浏览器的大小,DIV的页面位置top和left都不发生变动,就是说,等同于绝对定位。
以下为重要部分代码:
//这是浮动窗口的位置设定
this.top = document.body.scrollTop + document.documentElement.clientHeight/2 -this.flash_height/2;
this.left = document.body.scrollLeft +document.body.clientWidth/2 - this.flash_width/2;
//这是浮动窗口div的CSS
position:fixed;
overflow:hiddle;
z-index:10000;
top:this.top;
left:this.left;

效果应该是像http://wow.178.com/首页的弹出FLASH一样,无论怎么改变浏览器大小,flash都居中

按说这个位置的设定没问题,但是感觉只是第一次打开时生效,如果后期变动的话就失去效果了。
如果动态的是top和left变动,求教,万分感谢!

  • 写回答

2条回答 默认 最新

  • suziwen 2011-08-13 13:44
    关注

    [code="html"]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Div+CSS实现始终居中的半透明弹出层 <!-- html,body {height:100%; margin:0px; font-size:12px;} .mydiv { background-color: #FFCC66; border: 1px solid #f00; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index:999; width: 300px; height: 120px; left:50%; top:50%; margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */ margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/ margin-top:0px; position:fixed!important;/* FF IE7*/ position:absolute;/*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ } .bg,.popIframe { background-color: #666; display:none; width: 100%; height: 100%; left:0; top:0;/*FF IE7*/ filter:alpha(opacity=50);/*IE*/ opacity:0.5;/*FF*/ z-index:1; position:fixed!important;/*FF IE7*/ position:absolute;/*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); } .popIframe { filter:alpha(opacity=0);/*IE*/ opacity:0;/*FF*/ } --> function showDiv(){ document.getElementById('popDiv').style.display='block'; document.getElementById('popIframe').style.display='block'; document.getElementById('bg').style.display='block'; } function closeDiv(){ document.getElementById('popDiv').style.display='none'; document.getElementById('bg').style.display='none'; document.getElementById('popIframe').style.display='none'; }


    源码爱好者欢迎你! 站长:249834575;网址:http://www.codefans.net
    关闭窗口

    点击这里弹出层



    [/code]

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?
  • ¥15 求daily translation(DT)偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的?
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3