javascript - 弹出窗口 jQ​​uery

Question

我找到了一个显示弹出窗口的代码，但它在透明状态下工作(opacity: 0)，我希望它使用显示(display: none)，因为我的中间有透明窗口的网站效果不佳。

这是我的代码 JS:

$(window).load(function(){
    jQuery(document).ready(function ($) {

        $('[data-popup-target]').click(function () {
            $('html').addClass('overlay');
            var activePopup = $(this).attr('data-popup-target');
            $(activePopup).addClass('visible');

        });

        $(document).keyup(function (e) {
            if (e.keyCode == 27 && $('html').hasClass('overlay')) {
                clearPopup();
            }
        });

        $('.popup-exit').click(function () {
            clearPopup();

        });

        $('.popup-overlay').click(function () {
            clearPopup();
        });

        function clearPopup() {
            $('.popup.visible').addClass('transitioning').removeClass('visible');
            $('html').removeClass('overlay');

            setTimeout(function () {
                $('.popup').removeClass('transitioning');
            }, 200);
        }

    });
});

还有我的CSS

h1{
    margin-top: 50px;
}
#popup_window{
    padding: 10px;
    background: #267E8A;
    cursor: pointer;
    color: #FCFCFC;
    margin: 200px 0px 0px 200px;
}
.popup-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(196, 196, 196, .85);
    top: 0;
    left: 100%;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -ms-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
}
.overlay .popup-overlay {
    opacity: 1;
    left: 0
}
.popup {
    position: fixed;
    top: 25%;
    left: 50%;
    z-index: -9999;
}
.popup .popup-body {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7));
    background: -webkit-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    opacity: 0;
    min-height: 150px;
    width: 400px;
    margin-left: -200px;
    padding: 30px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -ms-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    position: relative;
    -moz-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
    -webkit-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
    box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
    text-align: center;
    border: 1px solid #e9e9e9;
    cursor: pointer;
}

.popup.visible, .popup.transitioning {
    z-index: 9999;
}
.popup.visible .popup-body {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.popup {
    cursor: pointer;
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 150px;
    right: 195px;
    background: url("images/quit.png") no-repeat;
    text-decoration: none;
    color: #000;
}

a.popup-exit { text-decoration: none; font-size: 10px; color: #000; }

.popup .popup-content {
    overflow-y: auto;
}
.popup-content .popup-title {
    font-size: 24px;
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 10px;
}
.popup-content p {
    font-size: 13px;
    text-align: justify;
}

和 PHP/HTML:

if (mysql_num_rows($query) > 0) {
while ($info = mysql_fetch_array($query)) {
    //http://steamcommunity.com/my/tradeoffers/privacy
    $content .= '
        <div class="popup" id="popup-'.$info["id"].'">
            <div class="popup-body">
                <div class="right"><a href="#" class="popup-exit">x</a></div>
                <center><b>'.$info["nazwa"].' (<i>'.$info["opis"].'</i>)</b></center>
                <form action="index.php" method="POST">
                <input name="AddReply" type="hidden" value="1">
                <input name="id_s" type="text" value="'.$info["id"].'" style="display: none;" />
                <input name="nazwa_s" type="text" value="'.$info["nazwa"].'" style="display: none;" />
                <input name="opis_s" type="text" value="'.$info["opis"].'" style="display: none;" />
                <input name="numer" type="text" value="'.zdobadzNumer($info["cena"]).'" style="display: none;" />
                    <table class="kupowanie" align="center">
                    <tr>
                        <td align="right">Dostępnych sztuk</td><td class="druga"><b>'.$info["dostepnych"].'</b></td>
                    </tr>
                    <tr>
                        <td align="right">Cena</td><td class="druga"><b>'.$info["cena"].' PLN</b></td>
                    </tr>
                    <tr>
                        <td align="right">Tre¶ć SMSa</td><td class="druga"><b>'.$info["tresc"].'</b></td>
                    </tr>
                    <tr>
                        <td align="right">Numer</td><td class="druga"><b>'.zdobadzNumer($info["cena"]).'</b></td>
                    </tr>
                    <tr>
                        <td align="right">Kod zwrotny</td><td class="druga"><input type="text" name="kod" /></td>
                    </tr>
                    <tr>
                        <td align="right">Link wymiany</td><td class="druga"><input type="text" name="link" /><br />
                        <span style="font-size:8px">
                            Kliknij <a target="_blank" style="text-decoration:none; color: #d10915;" href="http://steamcommunity.com/my/tradeoffers/privacy">tu</a> aby zdobyć.
                        </span></td>
                    </tr>
                    <tr>
                        <td colspan="2"><input '; if ($info["dostepnych"] == 0) { $content .= "disabled "; } $content .= 'type="submit" class="akceptuj" id="akceptuj" value="Akceptuj" /></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <hr />
                                <table width="100%">
                                    <tr>
                                        <td width="50%"><img src="addons/images/cashbill.png" width="90%" /></td>
                                        <td>Nie dostałe¶ kodu zwrotnego? Kliknij <a style="text-decoration:none; color: #d10915;" href="http://reklamacje.cashbill.pl/">tutaj</a>.</td>
                                    </tr>
                                </table>
                            <hr />
                        </td>
                    </table>
                </form>
            </div>
        </div>
    ';
}

你能帮我编辑这个以使用 display 而不是 opacity 吗？

Answer 1

尽量去掉popup-overlay在0处的空格，这样点击就可以通过

.popup-overlay {
width: 0;
height: 0;
}

我无法测试是否有效，但可能足以用 CSS 中的显示属性替换不透明度。

.popup .popup-body {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7));
background: -webkit-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
display:none;
....

对于 .visible 类:

.popup.visible .popup-body {
    display:block;    
}