Question

我正在试图弄清楚如何使用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> <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>被忽略，所有内容似乎都有效。如果你认为你知道可能有用的东西，你可以复制上面的代码块并改变它;它已经是一个完整的HTML文件。

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

{{1}}

Answer 1

您遇到的主要问题是您从display: none转移到display: block。过渡不会那样。由于您已经opacity隐藏了div，并且您还使用了position: absolute，因此我认为没有充分理由不将div留在display: block。

我还认为通过移动你希望div在显示到CSS类中的属性并在适当的触发器中添加和删除该类时，最好的服务。这样也可以在将来更容易修改它们。

我创建了a jsBin with the recommended changes。

如何让CSS / JavaScript弹出窗口进行转换？

1 个答案: