закройте легкое всплывающее окно и покажите успешное сообщение как предупреждение, используя контактную форму 7

Я использую плагин easy fancy box для отображения контактной формы 7 во всплывающем окне и при успешной отправке данных. Я закрываю всплывающее окно, используя on_sent_ok: "$.fancybox.close();", в дополнительных настройках контактной формы 7, теперь мне нужно показать всплывающее окно успешного сообщения при закрытии, Я попробовал "$.fancybox.close();alert('sucess');", но это выдаст окно предупреждения сначала, чем закрытие окна предупреждения, всплывающее окно также закроется, может кто-нибудь, пожалуйста, помогите мне показать окно предупреждения при закрытии модного окна?

Я новичок в JavaScript и WordPress.

Вот мой html и javascript

<div class="mdl-layout__content text-center" style="background: url('<?=$dynamic_images[4]['full']; ?>');color:<?php the_field('text_color');?>;background-size: cover; background-position:center;">
        <div class="mdl-grid">
            <div class="mdl-typography--text-center mdl-cell mdl-cell--12-col mdl-cell--middle">
                <?php the_field('demo'); ?>

                    <a href="#contact_form_pop" class="fancybox">
                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent prod-button3 prod-btn">Contact Us</button>
                    </a>
                    <div style="display:none" class="fancybox-hidden">
                        <div class="fancy-main-container">
                            <div id="contact_form_pop" class="slate_contact">
                                <?php echo do_shortcode('[contact-form-7 id="1579" title="Slate Form"]'); ?>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>

Javascript ниже

<script>
  $("#test").fancybox({
  onClosed: function () {
  alert('sucess');
  })
    });
 </script>

javascript wordpress contact-form-7
person Sandeep    schedule 21.12.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Передайте параметр onClosed функции fancybox.

i.e:

    <a id="example1" href="http://farm6.staticflickr.com/5614/15602332537_bae1aaccd8_b.jpg">
        <img alt="example1" src="http://farm6.staticflickr.com/5614/15602332537_bae1aaccd8_m.jpg">
    </a>
    $("#example1").fancybox({
      onClosed: function() {
       alert('sucess');
      })
    });

Обновлено

<div class="mdl-layout__content text-center" style="background: url('<?=$dynamic_images[4]['full']; ?>');color:<?php the_field('text_color');?>;background-size: cover; background-position:center;">
        <div class="mdl-grid">
            <div class="mdl-typography--text-center mdl-cell mdl-cell--12-col mdl-cell--middle">
                <?php the_field('demo'); ?>

                    <a href="#contact_form_pop" id="test">
                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent prod-button3 prod-btn">Contact Us</button>
                    </a>
                    <div style="display:none" class="fancybox-hidden">
                        <div class="fancy-main-container">
                            <div id="contact_form_pop" class="slate_contact">
                                <?php echo do_shortcode('[contact-form-7 id="1579" title="Slate Form"]'); ?>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
person Curiousdev    schedule 21.12.2016
comment
Я новичок в javascript, скажите, пожалуйста, что такое ‹YOUR-SELECTOR› - person Sandeep; 21.12.2016
comment
я не получаю результат, пожалуйста, найдите обновленный вопрос html и javascript - person Sandeep; 22.12.2016
comment
Ваша контактная форма открыта во всплывающем окне? если да, при нажатии на какую кнопку она открывается, пожалуйста, вставьте html этой кнопки сюда .. - person Curiousdev; 22.12.2016
comment
да, он открывается в легком всплывающем окне fancybox, плагине wordpress - person Sandeep; 22.12.2016
comment
была бы кнопка или тег привязки, по клику на который он откроется, верно? чем, пожалуйста, предоставьте эту якорную ссылку или html кнопки, чтобы я мог выяснить, какой идентификатор мы должны поставить вместо #test - person Curiousdev; 22.12.2016
comment
спасибо за ваше терпение, пожалуйста, найдите обновленный вопрос - person Sandeep; 22.12.2016
comment
Найдите обновленный ответ, который вам просто нужно изменить в теге привязки, который я изменил в ответе. - person Curiousdev; 22.12.2016
comment
извините, всплывающее окно вообще не закрывается при успешной отправке - person Sandeep; 22.12.2016
comment
Найдите эту строку $(.fancybox).fancybox( во всем вашем проекте и, если она найдена, добавьте эту строку onClosed: function() { alert('sucess'); }), потому что это строка, которая сделала трюк за сценой, отменив все изменения и узнать выше линии. - person Curiousdev; 22.12.2016