【发布时间】：2013-11-06 00:08:52
【问题描述】：
我试图弄清楚如何使用 CSS 和少量 JavaScript 制作一个 div 弹出窗口。我已经能够点击一个链接，弹出一个框，当它打开时，它周围的屏幕是灰色的，如果你点击灰色，弹出窗口就会消失。但是，我不能让它淡入，而不仅仅是立即出现。这是我的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var pop = document.getElementById(el)
cvr.style.display = "block"
pop.style.display = "block"
pop.style.opacity = "1"
pop.style.webkitTransform = "scale(1, 1)"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "100%"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var pop = document.getElementById(el)
cvr.style.display = "none"
pop.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display:none;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity = 50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#popup {
display:none;
left:100px;
top:100px;
width:300px;
height:300px;
position:absolute;
z-index:100;
background:white;
padding:2px;
border:1px solid gray;
opacity:0;
-webkit-transform:scale(.5, .5);
-webkit-transition:all .5s ease-in-out;
}
#cover-link {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="cover"><a id="cover-link" href="#" onclick="closePopUp('popup');"></a></div>
<div id="popup">
Some Words
</div>
<a href="#" onclick="showPopUp('popup');">Show</a>
</body>
</html>
重要的部分是这些：
来自 JavaScript：
pop.style.opacity = "1"
pop.style.webkitTransform = "scale(1, 1)"
来自 CSS：
opacity:0;
-webkit-transform:scale(.5, .5);
-webkit-transition:all .5s ease-in-out;
除了 -webkit-transform:scale(.5, .5); 在 JavaScript 中时 pop.style.webkitTransform = "scale(1, 1)" 被忽略，而 -webkit-transition:all .5s ease-in-out; 没有做任何事情时，一切似乎都在工作。如果你认为你知道一些可能有用的东西，你可以复制上面的代码块并修改它；它已经是一个完整的 HTML 文件了。
这个想法是让它像这样褪色：
<html>
<head>
<style type="text/css">
.message {
left:100px;
top: 100px;
width:300px;
height:300px;
position:absolute;
z-index:100;
background:white;
padding:2px;
border:1px solid gray;
opacity:0;
-webkit-transform: scale(.95, .95);
-webkit-transition: all .5s ease-in-out;
}
.message p {
padding:80px 0;
border-radius:3px;
}
.info:hover + .message {
opacity: 1;
-webkit-transform: scale(1, 1);
}
</style>
</head>
<body>
<div class="info">
<p>Hover</p>
</div>
<div class="message">
<p>A Simple Popup</p>
</div>
</body>
</html>
【问题讨论】：
标签： javascript css popup transition webkit-transform