Looking for some assistance in creating a CSS pop-up with a touch of JavaScript magic. I've managed to trigger the pop-up box by clicking a link, and while it's visible, the background fades to grey. But I'm struggling to make the pop-up fade in smoothly instead of just appearing suddenly. Here is the code snippet I am working with:
<!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>
The key elements to focus on are:
In the JavaScript section:
pop.style.opacity = "1"
pop.style.webkitTransform = "scale(1, 1)"
In the CSS section:
opacity:0;
-webkit-transform:scale(.5, .5);
-webkit-transition:all .5s ease-in-out;
Most parts seem functional apart from -webkit-transform:scale(.5, .5); being disregarded when used alongside
pop.style.webkitTransform = "scale(1, 1)"-webkit-transition:all .5s ease-in-out;The objective is to achieve a fading effect akin to this example:
<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>