試圖讓一個div出現在一個可滾動頁面的中心 - 我的代碼中的錯誤？

正如前言要確保我清楚，我不希望div在頁面中間顯示死點，我希望它在可視窗口的中間。因此，如果您想象一個長頁面並且用戶向下滾動到接近底部並單擊該按鈕，則div將出現在頁面底部附近的屏幕中央。試圖讓一個div出現在一個可滾動頁面的中心 - 我的代碼中的錯誤？

這裏是我的代碼，這不鉻工作：

   function centerdiv() { 
var scrolledX, scrolledY; 

scrolledX = document.body.scrollLeft; 
scrolledY = document.body.scrolltop; 

var centerX, centerY; 
centerX = document.body.clientWidth; 
centerY = document.body.clientHeight; 

var leftoffset = scrolledX + (centerX - 100)/2; 
var topoffset = scrolledY + (centerY - 100)/2; 

$('.current div[name="popup"]').css({'top' : topoffset + 'px', 'left': 
leftoffset + 'px'});} 


      $(function() { 
     $("html").ajaxStart(function() { 
      centerdiv(); 
      $(".current div[name=popup]").show(); 
     }); 
     $("html").ajaxComplete(function() { 
      $(".current div[name=popup]").hide(); 
     }); 
    });

注意，這是用於iPhone移動網站和ajaxstart功能附加到HTML是至關重要的，因爲它不工作的iPhone上的任何其他方式在我的網站上。

來源

2011-08-03 David

它是如何工作的？不顯示div，沒有正確放置它？你看到了什麼結果？你是否嘗試過調試，如果是的話，那麼在非工作情況下所有變量的值是什麼？ –

你忘記設置位置到絕對，或固定

$（ '當前DIV [NAME = 「彈出」。 '），CSS（{' 頂'：topoffset +「 PX」， '左'：左偏移+ '像素'， '位置'： '絕對'}）;}

來源

2011-08-03 11:31:12 alimsky

這裏是我的解決方案，工作正常：

var winH = $(window).height(); 
    var winW = $(window).width(); 
    $(this).css('top', winH/2 - $(this).height()/2); 
    $(this).css('left', winW/2 - $(this).width()/2); 
    $(this).show();

$（本）必須是指你想在中心顯示DIV元素。

來源

2011-08-03 10:52:09 Alex

wh = $(window).height(); 
dh = $("#div").height(); 
$("#div").css("top",(wh - dh)/ 2 + $(window).scrollTop() + 'px');

編輯：不一樣的寬度，它實際上是：

ww = $(width).width(); 
dw = $("#div").width(); 
$("#div").css("left",(ww - dw)/ 2 + 'px');

但是，如果你有一個固定的視與否，有很多方法可以居中它實際上取決於...

祝你好運！

來源

2011-08-03 11:11:04

如果你沒有水平滾動，你可以直CSS DIV部分做{ 左：50％; margin-left： - [box_width/2] px; }

來源

2011-08-03 22:32:50

試圖讓一個div出現在一個可滾動頁面的中心 - 我的代碼中的錯誤？

回答

相關問題