JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <input type="button" value="Open Modal Window" id="openWindow" onclick="javascript: buildModalWindow(3);">
</div>
  
<div id="modalContent">
  
  <div id="frameModal" class="window">
  </div>
  
  <div id="mask">
  </div>
  
</div>

CSS

#mask {
	position: absolute;
	left: 0;
	top: 0;
	background-color: #000;
	display: none;
  width: 500px;
  height: 300px;
}

#modalContent .window {
	position: absolute;
	left: 0;
	top: 0;
	width: 440px;
	height: 200px;
	display: none;
	z-index: 9999;
	padding: 20px;
}

#modalContent #frameModal {
	width: 385px;
	height: 300px;
	padding: 5px;
	background-color: #ffffff;
	overflow: auto;
  left: 200;
  top: 150;
}

.close {
	display: block;
	text-align: right;
}

JavaScript

function buildModalWindow(values){

	jQuery(document).on('click', '#openWindow', function(e) {
		
		e.preventDefault();
		
		// mask effect
		$('#mask').fadeIn(150);
		$('#mask').fadeTo("slow",0.4);
		
    // frame effect
		$('#frameModal').fadeIn(500);
		
    // display the mask and the frame
		$('#mask').css("display","block");
		$('#frameModal').css("display","block");
		
    // HTML content in the frame
    $('#frameModal').html('<form id="formContent" name="formContent" method="post"><div class="myClass"><div class="linha fontmodalbold fontsize14"><label><span class="span-15">Some Form Title</span><span>Form Id</span></label></div><div class="linha"><label class="fontModalBold fontsize12">Atendant Type:</label><label class="fontModalBold fontsize12"><input type="radio" name="atendantType" id="correctiveAction" value="1"/>Corrective Action</label><label class="fontModalBold fontsize12"><input type="radio" name="atendantType" id="preventiveAction" value="2"/>Preventive Action</label><label class="fontModalBold fontsize12"><input type="radio" name="atendantType" id="project" value="3"/>Project</label><label class="fontModalBold fontsize12"><input type="radio" name="atendantType" id="contract" value="4"/>Contract</label></div><div class="direita"><input id="close" type="button" class="button" value="Close" /><input type="button" class="button" id="saveButton" value="Save" onclick="javascript: saveTheInformation();" /></div></div></form>');
    
	});

	// if close button is clicked
	jQuery(document).on('click', '#close', function (e) {
		
		e.preventDefault();
		
		$('#formContent').empty();
		$('#formContent').remove();
		
		$('#frameModal').css("display","none");
		$('#mask').css("display","none");
		
		$('#frameModal').empty();
		
	});
	
	// if div #mask is clicked
	jQuery(document).on('click', '#mask', function(e)...