JSFiddle - React, Tailwind, and code Playground

by nicorellius

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://malsup.github.com/jquery.form.js"></script>
<!-- the below form is what is inside fancy-test.html
<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>
-->

<a class="fancy-popup" href="http://nicorelli.us/fancy-test.html" 
    data-fancybox-type="iframe">fancy link</a>

JavaScript

$(document).ready(function() {
    
    function before_show() {
        alert("fancybox before show");
    }
    
    function after_show() {
        alert("fancybox after show");
    }
    
    function on_close() {
        alert("fancybox after close");
    }
    
    function alert_me() {
        $.fancybox.inner.find('iframe').contents().find('input.click-me').click(function() {
            alert("fancybox has been foiled!!!");
        });
    }
    
    //function alert_me() {
        //$('input.click-me').click(function() {
            //alert("fancybox has been foiled!!!");
        //});
    //}
   
    
    $(".fancy-popup").fancybox({
        openSpeed     :    'slow',
        openEffect    :    'fade',
        minWidth      :    '200',
        minHeight     :    '100',
        maxWidth      :    '400',
        maxHeight     :    '150',
        scrolling     :    'no',
        afterShow     :    alert_me
    });
});