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>

CSS

.sheen {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background: rgb(221, 221, 221);
    
    opacity=0.75;
    /*background: rgba(221, 221, 221, .75);*/
    
}

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(){
                        $(".ui-dialog-buttonset .ui-button")
                                  .html("<img src='http://placekitten.com/g/65/38'/>");
                        $("#popup").append("<div class='sheen'/>");
					    $.ajax({
				           url:'/echo/json',
				           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).
                              $(".ui-dialog-buttonset .ui-button")
                                  .text("DONE")
                                  .attr('disabled',true);
                                  
					            },2000);															
					            (event.preventDefault) ? event.preventDefault() : event.returnValue = false;								
					            $("#prnt_info_sbmt").click();					
				           },				
				           error:function(xhr,textStatus,errorThrown)
				           {
					             alert(errorThrown);	
				           }
				
			            });
                    }
				}
				
			});

});