CSS DIV與非工作溢出/高度覆蓋

這應該很容易，但我不知道爲什麼它不起作用。點擊圖片時彈出一個div覆蓋圖，我的目標是將內容放在頂部並讓它滾動並在底部有一個關閉按鈕。但是，它不滾動，高度不準確，關閉按鈕位置不正確。下面是代碼：CSS DIV與非工作溢出/高度覆蓋

CSS：

body { 
    margin: 0px; 
} 
#popup { 
    display:none; 
    position:relative;  
    left:25px; 
    top:45%;   
    width:275px; 
    height:200px; 
    margin-top:-70px; 
    color:#ffffff; 
    background:#000000; 
    border:10px solid #000; 
    border-radius:20px; 
    z-index:100000;  
} 
#alt { 
    position:absolute; 
    top:0; 
    overflow:auto; 
    height:175px; 
} 
#closebtn { 
    position:absolute; 
    bottom:0; 
    height:25px; 
}

的Javascript：

window.onload = function() { 
    document.getElementById("popupalert").onclick = function() { 
     var popup = document.getElementById("popup"); 
     popup.style.display = "block"; 
    }; 
    document.getElementById("closebtn").onclick = function() { 
     var popup = document.getElementById("popup"); 
     popup.style.display = "none";  
    } 
};

HTML

<img src="https://www.google.com/images/srpr/mlogo2x_3.png" width="100%" id="popupalert"> 
<div id="popup" align="center"> 
    <div id="alt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales tempor orci non convallis. Curabitur vestibulum, est ac placerat dictum, leo arcu congue lectus, sed dictum eros dolor vel dui. Sed molestie mollis tortor vitae lacinia. Donec aliquam dolor porta, tristique libero a, malesuada metus. Nullam id venenatis elit. Duis eu mi vel tortor ullamcorper luctus. Nunc ornare maximus justo id consectetur.<br><br></div> 
    <div id="closebtn" style="font-size:24pt">✕</div> 
</div>

這裏是fiddle。

來源

2014-08-29 HeatherLeigh

您是否嘗試過使用插件。我使用fancybox一堆這樣的東西http://fancyapps.com/fancybox/ – 2014-08-29 20:48:19

我沒有，因爲我試圖保持代碼儘可能簡單。這個代碼是整個「網站：」一個點擊時彈出的圖像。 – HeatherLeigh 2014-08-29 23:12:26

只需使用overflow: auto爲#popop

來源

2014-08-29 21:21:37

我對納賽爾的回覆實際上在這裏也適用，所以我會將其粘貼爲方便：這將很好，但我只希望'＃alt'滾動。我希望在底部的'＃closebtn'中總能看到關閉的X按鈕，它目前甚至沒有正確定位。本質上，我希望它看起來像[** this **]（http://i.imgur.com/LVwDMAe.png）（但用X代替問號，可以忽略它）。 – HeatherLeigh 2014-08-29 23:06:17

然後將它放在右上角。 – 2014-08-30 10:03:24

CSS DIV與非工作溢出/高度覆蓋

回答

相關問題