無論在哪裏彈出，都很難在中心彈出顯示

基本上我做了一個彈出窗口，並將其定位在我的頁面頂部，這很好，但顯然沒有爲底部的頁腳鏈接工作，因爲它只是顯示在頂部。無論在哪裏彈出，都很難在中心彈出顯示

我希望能夠讓它在中心彈出，不管鏈接被按下的位置，我希望這是有道理的。

我試過搜索互聯網而不是任何有用的教程如何解決這個問題。

所以我轉向了Stackoverflow的力量。

的Jquery：

$('a.contact , a.contact_footer, a.contact_text').click(function() { 
    $("#popup").load("contact.php"); 
    // Getting the variable's value from a link 
    var 
    show = $('#popup').css('display', 'block'), 
    popup = $(this).attr('href'); 

    //Fade in the Popup and add close button 
    $(popup).fadeIn(300); 

    //Set the center alignment padding + border 
    var popMargTop = ($(popup).height() + 24)/2; 
    var popMargLeft = ($(popup).width() + 24)/2; 

    $(popup).css({ 
     'margin-top' : -popMargTop, 
     'margin-left' : -popMargLeft 
    }); 

    // Add the mask to body 
    $('body').append('<div id="mask"></div>'); 
    $('#mask').fadeIn(300); 

    return false; 
}); 

// When clicking on the button close or the mask layer the popup closed 
$('a.cross, #mask').live('click', function() { 
    $('#mask , #popup').fadeOut(300 , function() { 
    $('#mask').remove(); 
}); 
return false; 
});

如果您需要了解更多信息請諮詢。

來源

2013-04-24 MaxwellLynn

你試過使用$（window）.scrollTop（）嗎？我用它來處理類似的情況。這裏的API：http://api.jquery.com/scrollTop/ – SamHuckaby 2013-04-24 19:56:48

ooooo不，我沒有，但這是一個很好的小竅門。現在會有一個戲。 – MaxwellLynn 2013-04-24 20:00:46

下面是一些我用了這種情況的代碼，我已經修改了它類似於代碼：

var view_width = $(window).width(); 
var view_top = $(window).scrollTop() + 70; 

// Move the lightbox to the middle of the screen. 
$(popup).css("left", (view_width - $(popup).width())/2); 
// Make sure the window is in view no matter where you are on the page 
$(popup).css("top", view_top);

來源

2013-04-24 20:00:46 SamHuckaby

嗯我有興趣使這種方法的工作，但我似乎無法得到它那裏。它不會回到頁面頂部 – MaxwellLynn 2013-04-24 20:07:03

您是否想要將頁面向上滾動到頂部，然後將彈出窗口放入？我想我對你的意思有點困惑。 – SamHuckaby 2013-04-24 20:12:40

對不起，我想我誤解了你。我以爲你會點擊頁腳到屏幕上方顯示彈出窗口 – MaxwellLynn 2013-04-24 20:18:04

在頁面的中心或我使用的元素顯示圖像下面的CSS代碼：

.element{position:absolute; display:block; margin:auto; top:0; bottom:0; left:0; right:0;}

順便說一句，這是Firefox使用，如果你查看一個圖像文件相同的代碼。我認爲這應該也適用於彈出窗口。

來源

2013-04-24 20:03:09 ITFarmer

我試過了，它只顯示在最上面。所以只是在做同樣的事情，這是不幸的現在它不幸 – MaxwellLynn 2013-04-24 20:10:18

@Maximus爲了得到這個工作，我認爲有hsa是一個元素與'位置：相對;'圍繞彈出，所以如果你有像全屏元素作爲彈出框後面的背景，它可能會更好地工作 – ITFarmer 2013-04-24 20:19:55

hmm我的容器有相對位置，所以應該沒問題。 – MaxwellLynn 2013-04-24 20:24:52

我發現實際顯示彈出式菜單的最佳方式是按位置固定。然後，您可以將菜單放置在頁面上的任何位置，並且它將永遠不會移動（不管滾動位置），直到您退出。關閉菜單後，將其更改回顯示：塊。

來源

2013-04-24 20:10:24 nick

之前我沒有這樣做的原因是因爲它會在手機上斷開，這意味着您無法從某個特定點進行滾動。不過，我可以簡單地將它改回絕對值，小於600像素。除非你知道另一種使它適用於手機的方式嗎？ – MaxwellLynn 2013-04-24 20:17:42

那麼，在這種情況下，如果內容大於屏幕，則可以使用overflow：scroll。 – nick 2013-04-24 20:50:19

無論在哪裏彈出，都很難在中心彈出顯示

回答

相關問題