JSFiddle - React, Tailwind, and code Playground

by inDiscover

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<div id="popup" style="display:none">
    <form action="" name="pop_up_form" id="pop_up_form" method="post"><input class="pop_up_textbox" type="text" name="acct_nmbr" id="acct_nmbr" required maxlength="19" value=""/>
    <input class="pop_up_textbox" type="text" name="acct_nmbr" id="acct_nmbr" required maxlength="19" value=""/>
        <input class="pop_up_textbox" type="text" name="acct_nmbr" id="acct_nmbr" required maxlength="19" value=""/>
        <input class="pop_up_textbox" type="text" name="acct_nmbr" id="acct_nmbr" required maxlength="19" value=""/>
        <input class="pop_up_textbox" type="text" name="acct_nmbr" id="acct_nmbr" required maxlength="19" value=""/>
        <input class="pop_up_textbox" type="text" name="acct_nmbr" id="acct_nmbr" required maxlength="19" value=""/>
        <input class="pop_up_textbox" type="text" name="acct_nmbr" id="acct_nmbr" required maxlength="19" value=""/>
        <input class="pop_up_textbox" type="text" name="acct_nmbr" id="acct_nmbr" required maxlength="19" value=""/>
    </form>
</div>

JavaScript

$(function(){
//$('#pop_up_form').validate();    
$("#popup").dialog({ 
	  			autoOpen: true,
				title : "View/Edit Screen",				
				dialogClass : "pop-content pop-header-colr pop-button pop-float",
				width:400,
				height:450,
				modal: true,
				resizable: false,
				show: 'clip',
				buttons:{
					'SUBMIT':function(){
					    $.ajax({
				url:'some url path',
				type:'GET',
				data:{isPDF:0},											
				success:function(data,textStatus,xhr)
				{
					setTimeout(function (){
											// I need some logic to implement here to make a transparent background (so that user cant do any thing on background). Also I need to change the submit button to an ajax loading image.						
					},2000);															
					(event.preventDefault) ? event.preventDefault() : event.returnValue = false;								
					$("#prnt_info_sbmt").click();					
				},				
				error:function(xhr,textStatus,errorThrown)
				{
					alert(errorThrown);	
				}
				
			 });
					}	
				}
				
			});

});