Simple pop up page with HTML, CSS, JQUERY codes

Copy and paste the codes below.

HTML

<p><a class="vm-pop-up" href="#vm-pop-up-content-1">Click here : Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</a></p>
<p><a class="vm-pop-up" href="#vm-pop-up-content-2">Click here : Cupidatat non proident, sunt in culpa qui officia</a></p>
<div id="vm-pop-up-content-1" class="box-pop-up"> 
  	<div class="box-group">  
    	<h1>Pop up Content 1</h1> 
    	<p>Expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
    	<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    	<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
  </div>
</div>
<div id="vm-pop-up-content-2" class="box-pop-up"> 
  	<div class="box-group"> 
    	<h1>Pop up Content 2</h1>
    	<p>Expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
    	<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    	<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
  </div>
</div>

JQUERY

	var box_content = '';
	$( '.box-pop-up .box-group' ).append( '<a class="box-close" href="#">X</a>' ); 
	$( '.box-pop-up .box-group' ).before( '<div class="box-overlay"></div>' );
	$( '.vm-pop-up' ).click( function( e ){
		e.preventDefault();
		box_content = $( this ).attr( 'href' );
		$( box_content ).fadeIn( 'slow' );
	});
	$( '.box-pop-up .box-close' ).click( function( e ){
		e.preventDefault(); 
		$( box_content ).fadeOut( 'slow' );
	});
	$( '.box-pop-up .box-overlay' ).click( function( e ){ 
		$( box_content ).fadeOut( 'slow' );
	});

CSS

.box-pop-up {
	position: fixed;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
	overflow: hidden;
}
.box-pop-up .box-group {
	background-color: #4a4a4a;
	padding: 15px 30px;
	margin: 30px auto 0 auto;
	position: relative;
	width: 700px;
}
.box-pop-up .box-overlay {
	position: absolute;
	height: 100%;
	width: 100%;
}
.box-pop-up .box-close {
	top: 0;
	display: block;
	position: absolute;
	color: #fff;
	font-weight: bold;
	right: -20px;
	font-size: 20px;
	line-height: 20px;
}