<div id="myModal" class="modal">
  <div class="modal-content" id="a1"> <span class="close">&#215;</span>
    <p><span>Audits and Standards</span></p>
    <p>Text 1</p>
  </div>
  <div class="modal-content" id="a2"> <span class="close">&#215;</span>
    <p><span>Standards</span></p>
    <p>Text 2</p>
  </div>
  <div class="modal-content" id="a3"> <span class="close">&#215;</span>
    <p><span>Third item</span></p>
    <p>Text 3</p>
  </div>
</div>
<nav class="items"> 
	<a href="#a1" class="myBtn">Audits &amp; Standards</a> 
	<a href="#a2" class="myBtn">Standards</a> 
	<a href="#a3" class="myBtn">third item</a>
</nav>

.items a {
	display:block;
	cursor:pointer;
  color:#000;
  text-decoration:none;
}
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 99; /* Sit on top */
	left: 0;
	right:0;
	top: 0;
	bottom:0;
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
	background-color: #fefefe;
	position:fixed;
	top:20%;
	bottom:20%;
	left:0;
	right:0;
	margin:auto;
	padding: 20px;
	border: 1px solid #888;
	width: 70%; /* Could be more or less, depending on screen size */
	display:none;
	box-sizing:border-box;
	z-index:100;
	overflow:auto;
}
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
cursor:pointer;
  
}

.close:hover, .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

$(document).on('click','.myBtn',function(){
	var myTargetModal =  $(this).attr('href');
	$('#myModal').hide();
	$('.modal-content').hide();
	
	$('#myModal').fadeIn();
	$(myTargetModal).fadeIn();
  return false;
});

$("body" ).on( "click",".close", function() {
  	$('#myModal').hide();
	$('.modal-content').hide();
});