How to have CSS/JavaScript pop-up to transition in?

StackOverflow https://stackoverflow.com/questions/19614142

Question

I'm trying to figure out how to make a div pop-up with CSS and a small amount of JavaScript. I've gotten as far as being able to click a link, have a box pop up, and while it's up the screen around it is grey, and if you click the grey the pop-up goes away. However, I can't get it to fade in rather than just appear instantly. Here is my code:

<!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 important parts are these:

From the JavaScript:

pop.style.opacity = "1"
pop.style.webkitTransform = "scale(1, 1)"

From the CSS:

opacity:0;
-webkit-transform:scale(.5, .5);
-webkit-transition:all .5s ease-in-out;

Everything appears to be working except the -webkit-transform:scale(.5, .5); is being ignored when the pop.style.webkitTransform = "scale(1, 1)" is in the JavaScript, and the -webkit-transition:all .5s ease-in-out; just isn't doing anything. If you think you know something that may work you can copy the block of code above and alter it; it's already a complete HTML file.

The idea is to get it to fade something like this does:

<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>
Was it helpful?

Solution

The main issue that you have is that you're moving from display: none to display: block. The transition won't work like that. Since you already have opacity to hide the div, and you're also using position: absolute, I don't think there's a good reason to not leave the div at display: block.

I also think you would be best served by moving the properties that you want the div to have when it's shown into a CSS class and just adding and removing that class during the appropriate triggers. That makes it easier to modify them in the future, too.

I created a jsBin with the recommended changes.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top