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="wrap">
  <h3>fancyBox v2 - login box</h3>
  <a id="top-login-button" href="#login_form_ajax" rel="gallery">Open login form</a>
</div><!--wrap-->
<div style="display:none">
  <form id="login_form_ajax" method="post" action="">
    <p id="login_error" style="background: #ff0000; color: #fff;">Please, enter data</p>
    <p>
      <label for="login_name">Login: </label>
      <input type="text" id="login_name" name="login_name" size="30" />
    </p>
    <p>
      <label for="login_pass">Password: </label>
      <input type="password" id="login_pass" name="login_pass" size="30" />
    </p>
    <p>
      <input type="submit" value="Login" />
      <input class="click-me" id="form-button" type="submit" value="Cancel" onclick="javascript:$.fancybox.close();">
    </p>
    <p>
      <em>Leave empty so see resizing</em>
    </p>
  </form>
</div>

CSS

a {outline: 0 none;}
body {overflow-y: scroll;}
#wrap {
width: 800px;
margin: 20px auto;
}
#login_error {display: none;}

JavaScript

$(document).ready(function() {
  $("#top-login-button").click(function() {
    $.fancybox({
      href : "#login_form_ajax",
      afterClose : function(){ // it was onClosed for v1.3.4
        $("#login_error").hide();
      }
    }); // fancybox
  }); //click
  
  $("#login_form_ajax").bind("submit", function() {
    if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
      $("#login_error").show();
      $.fancybox.update(); // it was $.fancybox.resize(); for v1.3.4
      return false;
    }
    $.fancybox.showLoading(); // it was $.fancybox.showActivity(); for v1.3.4
    $.ajax({
      type   : "GET",
      cache  : false,
      url    : "http://proteomesoftware.createsend.com/t/y/s/krdjjd/",
      data   : $(this).serializeArray(),
      success: function(data) {
        // THIS never gets executed
        $.fancybox(data);
      },
      complete : function(data) {
        $.fancybox.hideLoading();
      }
    });
    return false;
  }); // bind
}); // ready