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

$(".fancy-popup").fancybox({
        openSpeed     :    'slow',
        openEffect    :    'fade',
        minWidth      :    '200',
        minHeight     :    '100',
        maxWidth      :    '400',
        maxHeight     :    '150',
        scrolling     :    'no',
        beforeLoad    :    alert_me,
        beforeShow    :    before_show,
        afterShow     :    after_show,
        afterClose    :    on_close
});