Wordpress contant form 7とfancy boxを使用してon_sent_okまたはfancyboxを閉じるときに特定のセクションを表示する方法

Question

wp contact form 7とfancy boxに問題があります。私はフォームが提出された後、隠しコンテンツを表示する必要があります。私のフォームが提出されたら、私はそのコードを表示することができませんでした。

<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モーダル

<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() 
      }) 
     }); 

を試している

私はpartiを表示できませんでした

Answer 1

正しいセレクタを使用していないため、カスタムオプションが適用されていないようです。それはこのようにする必要があります：

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

デモ - 私たちは、お問い合わせフォーム7を送信するとfancyboxフォーム#modalはその後、URLがhttp://demo.com/#modalを変更しますアクティブな場合https://codepen.io/anon/pen/YrYqzy

Answer 2

それはここでhttp://demo.com/#wpc7-fm.にURL http://demo.com/からリダイレクトします。ただ$('#show').show()

をトリガーしかし、後にコードの上

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

- ：フォームは、URLが私たちのfancyboxが原因#wpc7 .`
例に置き換えたURL #modalに消えます、その場合にはhttp://demo.com/#wpc7-fmに置き換えられます提出されたらコードの上にフォームの提出は、ケースでは非アクティブになります。

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

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

    } 


}); 

この場所ハッシュは、隠しコンテンツを有効にすることができます。