如何使用WordPress的形式7和花哨的框當on_sent_ok或fancybox關閉時顯示特定的部分

我有一個問題，聯繫表格7和花式框。提交表單後，我需要顯示一個隱藏的內容。當我的表單被提交時，我無法顯示該代碼。如何使用WordPress的形式7和花哨的框當on_sent_ok或fancybox關閉時顯示特定的部分

<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 cular section ..

來源

2017-10-05 Fussionweb

看起來你沒有使用正確的選擇器，因此你的自定義選項沒有被應用。它應該是這樣的：

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

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

來源

2017-10-05 08:44:17 Janis

幹得好！它只在我關閉自己的時候才工作，當表單提交fancybox時會需要它'＃show'應該可以工作。 – Fussionweb

但問題在哪裏？提交表單時請關閉fancybox。我已經更新了演示。 – Janis

當表單提交時關閉fancybox將URL更改爲'http：// demo.com /＃modal'爲'http：// demo.com /＃wpc7-fm'，這樣fancybox就會消失，我再次想要進入花哨的盒子並關閉。那麼它表明，無論是表單應該停留還是必須關閉自動然後顯示隱藏的內容。 – Fussionweb

當我們提交的聯繫方式7會重定向URL從到http://demo.com/這裏http://demo.com/#wpc7-fm.如果的fancybox形式#modal是活動的，那麼該URL會改變http://demo.com/#modal。一旦表單提交的URL將取代以http://demo.com/#wpc7-fm在這種情況下，我們的fancybox將消失，由於與#wpc7 .`
實例替換URL #modal： -

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

上面的代碼只是觸發$('#show').show()

但經過表單提交上面的代碼在這種情況下將變爲無效。

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

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

    } 


});

這個位置哈希可以激活隱藏的內容。

來源

2017-10-08 11:06:55 Fussionweb

如何使用WordPress的形式7和花哨的框當on_sent_ok或fancybox關閉時顯示特定的部分

回答

相關問題