diff --git a/css/component.css b/css/component.css
index c151020..12ffd06 100755
--- a/css/component.css
+++ b/css/component.css
@@ -119,7 +119,7 @@
 }
 
 /* Morph Button Style: Modal */
-.morph-button-modal::before {
+.morph-button-modal .modal {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -132,14 +132,15 @@
 	-webkit-transition: opacity 0.5s;
 	transition: opacity 0.5s;
 	pointer-events: none;
+	display: block;
 }
 
-.morph-button-modal.open::before {
+.morph-button-modal.open .modal {
 	opacity: 1;
 	pointer-events: auto;
 }
 
-.morph-button-modal.active::before {
+.morph-button-modal.active .modal {
 	z-index: 1800;
 }
 
@@ -495,4 +496,4 @@
 	.morph-button-sidebar.open .morph-content {
 		height: 100% !important;
 	}
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index 969d9b5..f5705d0 100755
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
 		<link rel="stylesheet" type="text/css" href="css/component.css" />
 		<link rel="stylesheet" type="text/css" href="css/content.css" />
 		<script src="js/modernizr.custom.js"></script>
+		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
 	</head>
 	<body>
 		<div class="container">
@@ -39,6 +40,7 @@ <h1>Morphing Buttons Concept</h1>
 				<div class="mockup-content">
 					<p>Pea horseradish azuki bean lettuce avocado asparagus okra.</p>
 					<div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
+						<span class="modal"></span>
 						<button type="button">Login</button>
 						<div class="morph-content">
 							<div>
@@ -56,6 +58,7 @@ <h2>Login</h2>
 					</div><!-- morph-button -->
 					<strong class="joiner">or</strong>
 					<div class="morph-button morph-button-modal morph-button-modal-3 morph-button-fixed">
+						<span class="modal"></span>
 						<button type="button">Signup</button>
 						<div class="morph-content">
 							<div>
@@ -152,7 +155,17 @@ <h3>Sidebar Transitions</h3>
 				[].slice.call( document.querySelectorAll( 'form button' ) ).forEach( function( bttn ) { 
 					bttn.addEventListener( 'click', function( ev ) { ev.preventDefault(); } );
 				} );
+				
+				$(document).keyup(function(e) {
+					if (e.keyCode == 27) {
+						// escape
+						$('.active .icon-close').click();
+					}
+				});
+				$('.modal').click(function() {
+					$('.active .icon-close').click();
+				});
 			})();
 		</script>
 	</body>
-</html>
\ No newline at end of file
+</html>
