如何在 on_sent_ok 或 fancybox 关闭时使用 Wordpress contant form 7 和花式框显示特定部分

Posted 2023-05-09

【中文标题】如何在 on_sent_ok 或 fancybox 关闭时使用 Wordpress contant form 7 和花式框显示特定部分

【英文标题】：How to use Wordpress contant form 7 and fancy box to display particular section when on_sent_ok or fancybox close

【发布时间】：2018-03-16 18:59:08

【问题描述】：

我对 wp 联系表 7 和花哨的盒子有疑问。提交表单后，我需要显示隐藏内容。提交表单后，我无法显示该代码。

 <div class="col-md-offset-8 col-md-4 text-center"><a class="btn btn-primary show" data-fancybox="modal" data-src="#modal" href="javascript:;">View The Technical Specification </a></div>

//Fancybox Modal

<section>
    <div id="modal" style="display: none; padding: 50px 5vw; max-width: 800px;text-align: center;">
                <h3>Provide the details</h3>
        <?php echo do_shortcode('[contact-form-7 id="816" title="Download From"]'); ?>

    </div>
    </section>

提交此表单后，我想显示类似的内容

<div id="show" > 
    ....................
         .............
    .......................
</div>

这是我尝试过的脚本

$('.fancybox').fancybox(
          afterClose: function () 
           $('#show').fadeIn(); // or .show()
          )
        );

我无法显示特定部分..

【参考方案1】：

看起来您没有使用正确的选择器，因此未应用您的自定义选项。应该是这样的：

$('[data-fancybox="modal"]').fancybox(
  afterClose: function () 
    $('#show').show()
  
);

演示 - https://codepen.io/anon/pen/YrYqzy

【讨论】：

干得好！它仅在我关闭自己时才起作用，当提交的表单时我需要它，fancybox 将关闭那一刻#show 应该起作用。

但是问题出在哪里？提交表单时关闭fancybox。我已经更新了演示。

当表单提交它关闭fancybox 的url 更改为http://demo.com/#modal 到http://demo.com/#wpc7-fm 所以fancybox 将消失，我想再次进入fancy box 并关闭。然后它显示，要么表单应该保留或必须关闭自动然后显示隐藏的内容。

【参考方案2】：

当我们提交联系表单 7 时，它将从 url http://demo.com/ 重定向到 http://demo.com/#wpc7-fm.Here，如果 fancybox 表单 #modal 处于活动状态，则 url 将更改为 http://demo.com/#modal。提交表单后，url 将替换为 http://demo.com/#wpc7-fm，在这种情况下，由于 url #modal 替换为 #wpc7，我们的幻想框将消失。` 示例：-

$('[data-fancybox="modal"]').fancybox(
afterClose: function () 
$('#show').show()

);

上面的代码只是触发$('#show').show()

但是在表单提交之后，上面的代码会变成不活动的情况。

jQuery(document).ready(function() 
if ( location.hash != 0 && location.hash == '#wpcf7-fm' )

    $('#show').show();

    


);

这个位置哈希可以激活隐藏的内容。