Use popup class style for ninja-mode help.

apps/contacts/css/contacts.css

@@ -125,7 +125,7 @@ input[type="checkbox"] { width: 20px; height: 20px; vertical-align: bottom; }
 .typelist[type="button"] { float: left; max-width: 10em; border: 0; background-color: #fff; color: #bbb} /* for multiselect */
 .typelist[type="button"]:hover { color: #777; } /* for multiselect */
 .addresslist { clear: both; font-weight: bold; }
-#ninjahelp { position: absolute; bottom: 0; left: 0; right: 0; padding: 1em; margin: 1em; border: thin solid #eee; border-radius: 5px; background-color: #DBDBDB; opacity: 0.9; }
+#ninjahelp { position: absolute; bottom: 0; left: 0; right: 0; padding: 1em; margin: 1em; opacity: 0.9; }
 #ninjahelp .close { position: absolute; top: 5px; right: 5px; height: 20px; width: 20px; }
 #ninjahelp h2, .help-section h3 { width: 100%; font-weight: bold; text-align: center; }
 #ninjahelp h2 { font-size: 1.4em; }

apps/contacts/js/contacts.js

@@ -1635,9 +1635,11 @@ $(document).ready(function(){
 	OCCategories.changed = OC.Contacts.Card.categoriesChanged;
 	OCCategories.app = 'contacts';
 
-	//$('#chooseaddressbook').on('click keydown', OC.Contacts.Addressbooks.overview);
+	var ninjahelp = $('#ninjahelp');
+
 	$('#bottomcontrols .settings').on('click keydown', function() {
 		try {
+			ninjahelp.hide();
 			OC.appSettings({appid:'contacts', loadJS:true, cache:false});
 		} catch(e) {
 			console.log('error:', e.message);
@@ -1648,19 +1650,17 @@ $(document).ready(function(){
 	});
 	$('#contacts_newcontact').on('click keydown', OC.Contacts.Card.editNew);
 
-	var ninjahelp = $('#ninjahelp');
-
 	ninjahelp.find('.close').on('click keydown',function() {
 		ninjahelp.hide();
 	});
 
 	$(document).on('keyup', function(event) {
-		console.log(event.which + ' ' + event.target.nodeName);
 		if(event.target.nodeName.toUpperCase() != 'BODY'
 			|| $('#contacts li').length == 0
 			|| !OC.Contacts.Card.id) {
 			return;
 		}
+		console.log(event.which + ' ' + event.target.nodeName);
 		/**
 		 * To add:
 		 * (Shift)n/p: next/prev addressbook

apps/contacts/templates/index.php

@@ -32,10 +32,8 @@
 			echo $this->inc('part.no_contacts');
 		}
 	?>
-	<div class="hidden" id="ninjahelp">
-		<a class="close" tabindex="0" role="button">
-			<img class="svg" src="core/img/actions/delete.svg" alt="<?php echo $l->t('Close'); ?>" />
-		</a>
+	<div class="hidden popup" id="ninjahelp">
+		<a class="close" tabindex="0" role="button" title="<?php echo $l->t('Close'); ?>"></a>
 		<h2><?php echo $l->t('Keyboard shortcuts'); ?></h2>
 		<div class="help-section">
 			<h3><?php echo $l->t('Navigation'); ?></h3>