<div class="frame">
  <div id="modal" class="modal">
		<img src="http://100dayscss.com/codepen/alert.png" width="44" height="38">
		<span class="title">Oh snap!</span>
		<p>An error has occured while creating an error report.</p>
		<div id="button" class="button">Dismiss</div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

.frame {
	display: flex;
	justify-content: center;
	align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #fff;
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	//-----------------
	background-color: #3F3F3F;
	
}

.modal {
	position: relative;
	width: 280px;
	height: 210px;
	text-align: center;
	background-color: white;
	border-radius: 3px;
	box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.4);
	animation: show-modal .7s ease-in-out;
	
	&.hide {
		animation: hide-modal .6s ease-in-out both;
	}
	
	img {
		margin-top: 24px;
	}
	.title {
		display: block;
		line-height: 24px;
		font-size: 18px;
		font-weigth: 400;
		margin: 14px 0 5px 0;
	}
	p {
		display: block;
		margin: 0;
		padding: 0 30px;
		font-size: 14px;
		line-height: 19px;
	}
	.button {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 0;
		width: 280px;
		height: 40px;
		cursor: pointer;
		font-size: 10;
		border-radius: 0 0 3px 3px;
		background-color: #F65656;
		transition: background-color 0.3s ease-in-out;
		transition: height 0.25s ease;
		&:hover {
			background-color: #EC3434;
		}
		&:active .modal{
			background-color: lightblue;
		}
	}
}

@keyframes show-modal {
	0% {
		transform: scale(0);
	}
	60% {
		transform: scale(1.1);
	}
	80% {
		transform: scale(.95);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes hide-modal {
	0% {
		transform: scale(1);
	}
	20% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(0);
	}
}

button.onclick = function() {
	document.querySelector('.modal').classList.add('hide');
};