1

我试图弄清楚如何使用 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;

一切似乎都在工作，除了在 JavaScript 中-webkit-transform:scale(.5, .5);时被忽略，而只是没有做任何事情。如果你认为你知道一些可能有用的东西，你可以复制上面的代码块并修改它；它已经是一个完整的 HTML 文件。pop.style.webkitTransform = "scale(1, 1)"-webkit-transition:all .5s ease-in-out;

这个想法是让它褪色这样的事情：

<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>
4

1 回答 1

1

您遇到的主要问题是您正在display: none从display: block. 过渡不会那样进行。由于您已经必须opacity隐藏 div，并且您也在使用position: absolute，我认为没有充分的理由不将 div 留在display: block.

我还认为，最好将 div 显示时的属性移动到 CSS 类中，并在适当的触发器期间添加和删除该类。这也使得将来修改它们变得更容易。

我创建了一个带有推荐更改的 jsBin。

于 2013-10-27T03:36:44.277 回答