Fadein Broken

HTML

<messageBox>
			<message><div></div></message>
			<close>x</close>
		</messageBox>
<button>run</button>

CSS

body messageBox {
	background-image: linear-gradient(#60ACA8, #4A8F8B);
	background-size: 100% auto;
	border-top: 1px solid #000000;
	bottom: 0;
	display:none;

	position: fixed;
	width: 100%;
}
body messageBox.bad {
	background-image: linear-gradient(#E74C3C, #D62C1A);
	background-size: 100% auto;
	color: #FFFFFF;
}
body messageBox message {
	display: block;
	height: 100%;
	position: relative;
	width: 100%;
}
body messageBox message div {
	left: 50%;
	padding: 0 25px 0 10px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}body messageBox close {
	 font-weight: bold;
	 position: absolute;
	 right: 5px;
	 top: 5px;
 }

JavaScript

$('body').on('click', 'button', function(){
   $('messageBox').fadeIn(); 
});