时间戳

首页 > 解决方案 > 更改弹出窗口的默认关闭按钮

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

问题描述

一旦用户发送他的表单，我就会出现这个弹出式感谢消息。这是弹出窗口的 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上发送一份测试表进行检查。

标签： htmlcsswordpress

解决方案

而不是应用 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);
}

推荐阅读