JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<div id="test" style="display:none;width:300px;">
    <form id="my-form" method="post" action="">
        <table>
            <tr>
                <td><label for="name">Name: </label>
                    <input type="text" id="name" name="name">
               </td>
                <td>
                    <input class="click-me" id="submit" type="submit" value="submit">
                </td>
            </tr>
        </table>
    </form>
</div>

<a href="#test" class="fancy-popup">fancy link</a>

JavaScript

function alert_me() {
    $('.click-me').click(function() {
        alert("fancybox has been foiled!!!");
    });
}

$(".fancy-popup").fancybox({
    afterLoad   : function() {
        this.inner.prepend( '<h1>Newsletter form</h1>' );
        this.content = this.content.html();
    },
    afterShow   : alert_me
});