如何在屏幕中間顯示固定div當屏幕顯示頁面底部

我設計了一個有許多小圖片的頁面，我喜歡點擊小圖片然後打開一個固定的div並顯示我的大圖片，這對於圖片來說非常適合在長達頁面，但是當滾動下拉到頁面底部它現在工作得很好，什麼是truble，你可以看到它在這個頁面：http://www.3dcreate.ir/New3DCreate/Pages/Gallery/3DGallery/3dg_Chosen.php 如何在屏幕中間顯示固定div當屏幕顯示頁面底部

HTML代碼：

<!-- This is Div of Large Image and Background Shade --> 
<div class="BackgroudShade"></div> 
<div class="DivOfImage"><img class="LargeImage"/></div>

CSS代碼：

.DivOfImage { 
    border: 8px solid #FFF; 
    color:#FFF; 
    background-color:#FFF; 
    border-radius:10px; 
    position:fixed; 
}

jQuery代碼：

function LoadShowDiv() { 
    $('.BackgroudShade').slideDown(800); // shade of background will be visible 
    $(".DivOfImage").show();    // Div of Large Image will be visible   
// When Image loaded successful then set width,height and top,left of Large Image Div 
// but i want set top,left when screen is scroll down to bottom of page 
// then show Div at middle of screen in every time 
    $('.LargeImage').load(function() {  
     $('.DivOfImage').width($('.LargeImage').width()); 
     $('.DivOfImage').height($('.LargeImage').height()); 
     var LeftPostion = (WidthOfScreen - $('.LargeImage').width())/2; 
     var TopPostion = (HeightOfScreen - $('.LargeImage').height())/2; 
     $(".DivOfImage").offset({ top: TopPostion, left: LeftPostion}); 
     $('.LargeImage').show(1000); 
    }) 
} 

$('#SmallImage').click(function(){ 
    $('.LargeImage').attr('src','LargeImage.jpg'); 
    LoadShowDiv(); 
})

來源

2013-12-12 user2615494

爲什麼你重新創造轉動輪子，不使用這些方便的燈箱之一？ – Robert

請在本頁查看：http：//www.3dcreate.ir/New3DCreate/Pages/Gallery/3DGallery/3dg_Chosen.php – user2615494

是不是css'position：fixed;'你在哪裏找？這樣，即使您向下滾動或向上滾動，圖像始終保持在給定的偏移量（中心）。 – nkmol

林不知道，但你爲什麼不嘗試：

$(".DivOfImage").css({'position': 'fixed', 'top': TopPostion + 'px', 'left': LeftPostion + 'px'});

，而不是

$(".DivOfImage").offset({ top: TopPostion, left: LeftPostion});

來源

2013-12-12 07:58:07

感謝我的朋友，我刪除了css代碼，並在jquery中設置了DIV的css，並且它確實是工作的，謝謝 – user2615494

如何在屏幕中間顯示固定div當屏幕顯示頁面底部

回答

相關問題