CSS DIV оверлей с нерабочим переполнением / высотой
Это должно быть легко, но я не знаю, почему это не работает. у меня есть 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>
А вот и скрипка.