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。移行はそのようには機能しません。すでにopacitydiv を非表示にする必要があり、 も使用しているposition: absoluteため、div を のままにしない正当な理由はないと思いますdisplay: block。

また、div が CSS クラスに表示されたときに必要なプロパティを移動し、適切なトリガー中にそのクラスを追加および削除することで、最適なサービスが提供されると思います。これにより、将来的にそれらを変更することも容易になります。

推奨される変更を加えて jsBinを作成しました。

于 2013-10-27T03:36:44.277 に答える