通过jquery或javascript在页面的可见区域中心DIV

时间:2011-10-29 18:33:04

标签: jquery

我的页面非常大。所以垂直滚动条即将到来。假设我在页面的中间,从那里我可以上升&滚动下来。我希望当我在页面中间时,我的div应该放在页面可见区域的中心而不是页面的中心。我需要在浏览器窗口页面的可见区域中心显示div。我不确定我能解释我想说的是什么。可见区域表示我一次可以看到的区域没有滚动而不是整个页面。

所以请指导我如何获得身高和身高。页面可见区域的宽度不是整页。 指导我如何放置在页面可见区域的中心但不是整页。可见区域并不意味着整个页面而不是我一次看不到滚动页面的区域。

我搜索谷歌并找到了指南,我相应地编写了代码,但它没有用。

所以这是我的代码根据我的要求不起作用。

$(".ui-dialog").animate({
left: viewportwidth / 2 - $(".ui-dialog").outerWidth() / 2, 
top: viewportheight / 2 - $(".ui-dialog").outerHeight / 2
}, 1000);

检测视口区域,如

var viewportwidth;
var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth,
  viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth,
   viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
   viewportheight = document.getElementsByTagName('body')[0].clientHeight
}

这在FF浏览器中不起作用,它会导致IE出现问题,无论我在jquery对话框中放置什么都不在眼前。

所以请帮我弄清楚如何在页面的可见区域显示div。

感谢

1 个答案:

答案 0 :(得分:0)

您不需要JavaScript。你可以使用“position:fixed;”。

示例:http://jsfiddle.net/hENGL/