使用Javascript調整絕對定位的元素

我試圖使用div元素來通過在隱藏彈出窗口顯示時掩蓋頁面來模仿模式彈出對話框的效果。我設法達到了預期的效果，但遇到了一個問題，因爲我無法調整此遮罩元素的大小以匹配加載頁面的大小。如果我只是將這個div的高度設置爲任意高度，一切正常，除非我的頁面比內容長得多。使用Javascript調整絕對定位的元素

這裏是我正在嘗試設置掩模元件的高度與

function sizeModalDiv(){ 
    var ModalDiv = document.getElementById('ModalDiv'); 
    var FooterDiv = document.getElementById('FooterDiv'); 

    var FooterTop = FooterDiv.offsetTop 
    var PageBottom = FooterTop + FooterDiv.clientHeight; 
    ModalDiv.style.height = PageBottom+'px'; 
}

的JavaScript代碼，這裏是我的遮蔽元件

#ModalDiv{ 
    position:absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 4000px; 
    z-index: 9999; 
    background-color:Black; 
    opacity: 0.7; 
    visibility: hidden; 
}

CSS，這是本質的我的html代碼

<body> 
    <div id="pagecontent"> 
    ....... 
    ....... 
    ....... 
    </div> 
    <div id="ModalDiv"></div> 
</body>

我已經嘗試了許多不同的方法，這裏建議動態調整但沒有一個對我的掩蔽元件的高度沒有任何影響。它始終保持在CSS中設置的高度。

我在哪裏出錯了？我敢肯定，這是一件相當簡單的事情，我錯過了任何幫助，將不勝感激。

來源

2013-08-27 D.Hussey

爲什麼不能使用'height：100％;'？ –

[示例]（http://api.jquery.com/height）這裏是一個如何獲得身高的例子;你也可以使用jquery設置高度 – Asdakamessoy

覆蓋整個窗口，你可以使用這個CSS：

#ModalDiv{ 
    position:fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 9999; 
    background-color:Black; 
    opacity: 0.7; 
    visibility: hidden; 
}

A live demo at jsFiddle。

來源

2013-08-27 06:40:48 Teemu

非常感謝你Teemu，這已經像一個魅力 –

我認爲設置爲html和body的CSS將克服你的問題。此外，如果您的頁面可以有足夠的內容滾動（所以彈出窗口在屏幕上），請記住彈出使用position: fixed;。

html{ 
height: 100%; 
width: 100%; 
margin: 0; 
border: 0; 
padding: 0; 
} 

body{ 
height: 100%; 
width: 100%; 
margin: 0; 
border: 0; 
padding: 0; 
} 

#ModalDiv{ 
    position:absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    background-color:Black; 
    opacity: 0.7; 
    visibility: hidden; 
}

來源

2013-08-27 06:44:22 Grallen

感謝您的建議，但這只是設置我的遮罩元素的高度的瀏覽器窗口的高度，而不是頁面的高度 –

使用Javascript調整絕對定位的元素

回答

相關問題