【发布时间】：2014-08-30 05:26:02
【问题描述】：
这应该很容易，但我不知道为什么它不起作用。
我有一个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。
【问题讨论】：
-
您是否尝试过使用插件。我用很多花式盒子来处理这样的东西fancyapps.com/fancybox
-
我没有，因为我试图使代码尽可能简单。此代码是“网站”的全部内容：单击时会弹出一个图像。