Question

我收到了此弹出式感谢消息，该消息在用户发送表单后出现。这是弹出窗口的HTML：

<div id="pfcf-popup" style="width: 443px; height: 261px; background: url(&quot;&quot;) right top / cover no-repeat rgb(255, 255, 255); color: rgb(0, 0, 0) !important; top: 541px; left: 739px; display: block;" class="modal-box">
    <a href="#" class="js-modal-close close">×</a>
    <div class="modal-body">
        <span style="color:#000000">
            <p style="text-align: center;">
                <img class="size-medium wp-image-707 aligncenter" src="http://mayabarber.co.il/wp-content/uploads/2018/06/messagesent-300x63.png" alt="" width="300" height="63">

                <span style="color: #001a71; font-family: heebo; font-size: 1.563em;">אצור קשר בהקדם</span>
            </p>
        </span>
    </div>
</div>

.js-modal-close close是X按钮。

我尝试使用以下CSS来将默认的关闭按钮替换为我的按钮，但这没有用。

#pfcf-popup a.close {
content: url('
http://mayabarber.co.il/wp-content/uploads/2018/06/maya_landing_1920wide-11.svg') !important;
    display: inline-block;
    height: 35px !important;
    width: 35px !important;
max-width: 35px !important;
max-height: 35px  !important;
z-index: 3;

}

有人可以告诉我我的代码有什么问题吗？您也可以尝试在mayabarber.co.il上发送测试表格以将其签出。

Answer 1

选中此

#pfcf-popup a.close {
        display: inline-block;
        height: 35px !important;
        width: 35px !important;
        max-width: 35px !important;
        max-height: 35px !important;
        z-index: 3;
        background: #fff url(http://mayabarber.co.il/wp-content/uploads/2018/06/maya_landing_1920wide-11.svg);
        font-size: 0;
        color: #fff !important;
    }

Answer 2

代替应用content：url（）;将其用作背景图片

#pfcf-popup a.close {
    display: inline-block;
    height: 35px !important;
    width: 35px !important;
    background: #fff url(http://mayabarber.co.il/wp-content/uploads/2018/06/maya_landing_1920wide-11.svg);
}

更改弹出窗口的默认关闭按钮

2 个答案: