santosluiz

$(document).ready(function(){
	$('.modal-open').click(function(){
		$('.overlay').addClass('modal-show');
		$('.modal').addClass('modal-show');
		$('.modal-content').addClass('modal-animate');
	});
	$('.modal-close').click(function(){
		$('.overlay').removeClass('modal-show');
		$('.modal').removeClass('modal-show');
		$('.modal-content').removeClass('modal-animate');

santosluiz

html, body{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: #FF3300;
	font-family: 'Ubuntu', sans-serif;
}	

.modal{
	position: fixed;

santosluiz

<div class="modal"> <!-- Corpo principal - Onde tudo é encapsulado tudo -->
	<div class="modal-content">  <!-- Conteúdo do modal -->
		<h3>Modal Dialog</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit.</p>
		<button class="modal-close">CLOSE ME!</button>		
	</div>
</div>

<button class="modal-open">~ OPEN MODAL ~</button>