我想在外部div的中間（垂直和水平）居中模態對話框窗口。我爲模態窗口使用jquery插件。這裏是我想要完成的事情的圖片在div中間居中模態窗口

正如你所看到的，我所擁有的當前代碼幾乎居中但不安靜。這裏是我的javascript代碼

$(id).css('top', $('#pagecontent').position().top + ($('#pagecontent').height()/2) - ($(id).height()/2)); 
$(id).css('left', $('#pagecontent').position().left + ($('#pagecontent').width()/2) - ($(id).width()/2));

pagecontent是哪裏我試圖居中模式窗口

任何幫助將不勝感激股利矩形。

在此先感謝卡洛斯

來源

2012-07-14 csosa

正如你可能不會被允許的，但一個新的用戶，在您的問題張貼圖片。如果您發佈想要添加到問題中的圖片的網址，我將代表您進行修改。 – 2012-07-14 00:30:32

試試這個：首先，用relative位置設置父元素：

#pagecontent {position:relative;}

然後，設置與absolute位置的模式窗口也有一個top和left值由50%：

#modal { 
    position:absolute; 
    top:50%; 
    left:50%; 
}

最後，剛剛設置的模態窗口的margin-top和margin-left（負）的基礎上它的height和width除以二：

$id.css({ 
    'margin-top': -($id.outerHeight()/2), 
    'margin-left': -($id.outerWidth()/2) 
});

DEMO：http://jsfiddle.net/tovic/2QVX8/24/

來源

2012-07-14 19:48:28

我想建議你的答案如下編輯：'position：fixed'而不是絕對的，並增加'z-index：9999' – Fresheyeball 2012-07-14 19:51:22

@Fresheyeball：我不這麼認爲，因爲上面的問題：「我'嘗試將中間的模態對話窗口居中放置在一個外部div **的中間（垂直和水平）**。「固定」位置將破壞模態位置並根據屏幕移動位置，而不是基於父元素。 'z-index'，很好。 – 2012-07-14 19:58:10

@Taufix我的不好。那麼就是'z-index'。 – Fresheyeball 2012-07-15 15:32:49

沒有提到的圖片或鏈接一個現場，很難提供準確的答案。

儘管如此，通過查看您的代碼，您正在將元素居中，但您並未考慮可應用於其或其父級的任何margin或padding。

實例：

讓我們假設following example，具有必要的申請更正代碼：

假設下面的標記：

<div id="pagecontent"> 
    <div id="foobar">I'm at the very middle!</div> 
</div>

隨着以下CSS：

#pagecontent { 
    margin: 10px; 
    padding: 10px; 
    height: 240px; 
    width: 360px; 
    border: 1px solid #D9D9D9; 
    position: relative; 
} 

#foobar { 
    position: absolute; 
    width: 200px; 
    height: 20px; 
    line-height: 20px; 
    border: 1px solid blue; 
}

jQuery代碼可以改進到：

進一步說明：

爲了收集使用jQuery元素的寬度和高度，並在同一時間獲取填充和保證金聲明佔用的空間後，您可以使用：

.outerWidth() jQuery的功能：

描述：獲取當前計算的寬度對於該組匹配的元素，包括填充和邊界的第一個元素。

.outerWidth（[includeMargin]）

includeMargin一個布爾指示是否包括在計算中元件的裕量。

element width model box

jQuery的.outerHeight()功能：

描述：獲得在匹配的元素集合，其中包括填充，邊框和任選餘量的第一元件中的電流計算出的高度。返回值的整數（不帶「px」）表示形式，如果在空的元素集上調用，則返回null。

.outerHeight（[includeMargin]）

includeMargin一個布爾指示是否包括在計算中元件的裕量。

enter image description here

來源

2012-07-15 05:09:55 Zuul

在div中間居中模態窗口

回答

實例：

進一步說明：

相關問題