Question

在wordpress site中，我使用的是联系表格7.此外，我添加了插件联系表格7响应消息弹出窗口，以显示验证错误消息和成功消息。问题是有时弹出窗口工作正常，有时虽然发生验证错误显示空白弹出窗口。为什么会这样？欢迎任何帮助/建议。谢谢。

暂时我在fancybox call上添加了settimeout功能。我不认为这是最好的方法。

Answer 1

使用fancybox： http://fancyapps.com/fancybox/

使用以下代码在wordpress functions.php文件中排队脚本：

jQuery( document ).ready(function() {
     jQuery('.wpcf7-popup-invalid, .wpcf7-popup-mailsent').fancybox({
                wrapCSS    : 'fancybox-custom',
                closeClick : true,

                openEffect : 'elastic',
                openSpeed  : 150,

                closeEffect : 'elastic',
                closeSpeed  : 150,

                helpers : {
                    overlay : {
                        css : {
                            'background' : 'rgba(238,238,238,0.85)'
                        }
                    }
                }
    });
});//document

jQuery(document).on('invalid.wpcf7', function () {
    //console.log('invalid.wpcf7 was triggered!');
    jQuery('.wpcf7-popup-invalid').trigger('click');
});
jQuery(document).on('mailsent.wpcf7', function () {
    //console.log('mailsent.wpcf7 was triggered!');
    jQuery('.wpcf7-popup-mailsent').trigger('click');
});

并在您的页面模板文件（例如page.php）中添加以下内容：

<a class="wpcf7-popup-mailsent" href="#f-success" title="" style="display: none;">PopUp</a>

<div id="f-success" style="width:400px;display: none;">
    <p>
        Success message.
    </p>
</div>

<a class="wpcf7-popup-mailsent" href="#f-failure" title="" style="display: none;">PopUp</a>

<div id="f-failure" style="width:400px;display: none;">
    <p>
        Failure message.
    </p>
</div>

说明：

1）这对我没用： https://contactform7.com/dom-events/

2）隐藏链接和jQuery触发器是使fancybox直接从js代码打开的最简单的解决方案

3）是的。我知道。您可以使用＆＃34; $＆＃34;而不是＆＃34; jQuery＆＃34;在Wordpress js文件中，如果你想

如何在弹出窗口中显示联系人7条消息？

1 个答案:

说明：