close easy fancy box pop and show successful message as alert using contact form 7

Question

I am using easy fancy box plugin to show contact form 7 in popup window and on successful submitting data.I am closing the pop up using on_sent_ok: "$.fancybox.close();",In additional settings of contact form 7, now i need to show popup of successful message on close, I tried "$.fancybox.close();alert('sucess');" but this will give alert box first than closing alert box the popup will also close, can someone please help me to show a alert box on close of fancy box?

I am new to JavaScript and WordPress.

Here is my html and 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 below

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

Answer 1

Pass the onClosed option to the fancybox function.

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

Updated

<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>