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

<div style="display:none">
	
	<form id="ml-form" class="site-form" method="post" action="">
	
	<p id="form_error" style="background: #ff0000; color: #fff;">Please enter data</p>
	<p id="name_error" style="background: #ff0000; color: #fff;">Don't forget your name</p>
	<p id="email_error" style="background: #ff0000; color: #fff;">We need  your email too</p>
	<p id="list_error" style="background: #ff0000; color: #fff;">Please select a list to subscribe to</p>
	
    
    <p id="ml-header">Mailing list sign up form</p>
    
    <table id="ml-form-table">
        <tr>
            <td class="form-field"><label for="name">Name: </label></td>
            <td><input type="text" id="name" name="name" /></td>
        </tr>
        <tr>
            <td class="form-field"><label for="email">Email: </label></td>
            <td><input type="text" name="email" id="email" /></td>
        </tr>
        <tr>
            <td class="form-field"><label for="institution">*Institution: </label></td>
            <td><input type="text" name="institution" id="institution" value="optional" onfocus="this.value='';" /></td>
        </tr>
		<tr><td>&nbsp;</td></tr>
        <tr>
            <td><input id="mailing_list" class="td-heading" type="checkbox" name="mailing_list" /></td>
			<td><label for="mailing_list">All Mailers</label></td>
		</tr>
		<tr>
			<td><input id="user_group" class="td-heading" type="checkbox" name="user_group" /></td>
			<td><label for="user_group">User Group Meetings</label></td>
		</tr>
		<tr>
			<td><input id="product_updates" class="td-heading" type="checkbox" name="product_updates" /></td>
			<td><label for="product_updates"></label>Product Updates</td>
      ...

CSS

a {
	outline: 0 none;
}

body {
	overflow-y: scroll;
}

#wrap {
	width: 800px;
	margin: 20px auto;
}

#form_error, #name_error, #email_error {
	display: none;
}

.form-field {
	text-align: right;
}

.td-heading {
	float: right;
}

#ml-form {
	font: normal 16px/1.3em Helvetica, Verdana, Arial;
}

#ml-header {
	font-weight: bold;
	color: #6d6e71;
	text-align: center;
}

#form-error {
	display: none;
	color: white;
	font-weight: bold;
	background-color: red;
	text-align: center;
}

#ml-form-table {
	display: block;
	margin: auto;
	font-size: 0.8em;
	font-weight: bold;
	padding-left: 25px;
}

#buttons {
	margin-left: 20%;
	margin-right: 20%;
}

#send-request, #cancel {
	display: inline;
}

JavaScript

$(document).ready(function() {
	$("#top-login-button").click(function() {
	$.fancybox({
		openSpeed 	:	'slow',
		openEffect	:	'fade',
		autoSize	  :	false,
		width		    :	'300',
		height		  : 	'400',
		title		    :	'Please check your email (inbox and spam folder) after submission.',
		scrolling  	: 	'no',
		helpers		  :	{
							title : {
								type : 'over'
							}
						},
		href 		: 	"#ml-form",
		beforeLoad 	: 	function(){ // it was onClosed for v1.3.4
							$("#form_error").hide();
							$("#name_error").hide();
							$("#email_error").hide();
							$("#list_error").hide();
						}
	});
});

$("#ml-form").bind("submit", function() {
	if ($("#name").val() == '') {
		$("#name_error").show();
		$("#email_error").hide();
		$("#list_error").hide();
		$.fancybox.update(); // it was $.fancybox.resize(); for v1.3.4
		return false;
	}
	
	if ($("#email").val() == '') {
		$("#email_error").show();
		$("#name_error").hide();
		$("#list_error").hide();
		$.fancybox.update(); // it was $.fancybox.resize(); for v1.3.4
		return false;
	}
	
	else if ($('input[name="mailing_list"]:checked').length == 0 &&
			 $('input[name="user_group"]:checked').length == 0 &&
			 $('input[name="product_updates"]:checked').length == 0) {
		$("#list_error").show();
		$("#email_error").hide();
		$("#name_error").hide();
		$.fancybox.update();
		return false;
	}
	
	else {
		return true;
	}
	
	$.fancybox.showLoading();
	
	$.ajax({
		type   	: 	"POST",
		cache  		: 	false,
		url    		: 	"http://proteomesoftware.createsend.com/t/y/s/krdjjd",
		data   		: 	$(this).serializeArray(),
		//success	: 	function(data) {
						 //$.fancybox(data);
					//}
    afterClose : function(data) {
                  $.fancybox.hideLoading();
                  }
	});
  
	return false;
	});
});