Modal example

Modal example

by eshernandez2

HTML

<div>
  <input type="button" value="Open Modal Window" id="openWindow" data-values="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){
		// 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>');

	jQuery(document).on('click', '#close', function (e) {
		hideAll();
	});
	
	// if div #mask is clicked
	jQuery(document).on('click', '#mask', function(e) {
		hideAll();
	});
}

function hideAll(){
		$('#formContent').empty();
		$('#formContent').remove();
		$('#frameModal').hide();
		$('#mask').hide();
		$('#frameModal').empty();
    $('#frameModal').hide();
}

$(document).ready(function(){
	$("#openWindow").click(function(e){
  	e.preventDefault();
    // other way to manage the "values"
 	 buildModalWindow($(this).attr("data-values"));
  });
});