Bookmark help for mobile phones

bookmark-help.js

// Bookmark help for phones
var isMobile = {
		Android: navigator.userAgent.match(/Android/i),
		BlackBerry: navigator.userAgent.match(/BlackBerry/i),
		iOS: navigator.userAgent.match(/iPhone|iPad|iPod/i),
		Opera: navigator.userAgent.match(/Opera Mini/i),
		Windows: navigator.userAgent.match(/IEMobile/i),
		any: function() {
			return isMobile.Android || isMobile.BlackBerry || isMobile.iOS || isMobile.Opera || isMobile.Windows;
		}
	},
	$bookmarkInfo = $('.bookmark-info'),
	$bookmarkModal = $('.bookmark-modal'),
	dismissedAlert = +(localStorage['dismissed-alert'] || 0),
	currentDate = +new Date;
 
$bookmarkInfo.on('click', function() {
	$bookmarkInfo.hide();
	$bookmarkModal.modal();
});
 
$bookmarkModal.find('.btn-primary').on('click', function() {
	localStorage['dismissed-alert'] = currentDate;
});
 
if (isMobile.any() && dismissedAlert + 2629740000 < currentDate) {
	$bookmarkInfo.show();
 
	if (isMobile.Windows) {
		$bookmarkModal.find('.modal-body').html('<ul><li>Press the menu button (three dots)</li><li>Select pin to start</li></ul>');
	} else if (isMobile.Android) {
		$bookmarkModal.find('.modal-body').html('<ul><li>Press the menu button</li><li>Select Add to homescreen or Add shortcut to home</li><li>Press Add</li></ul>');
	} else if (isMobile.iOS) {
		$bookmarkModal.find('.modal-body').html('<ul><li>Press the share icon <img src="' + template_path + 'img/ios-action-icon.png"></li><li>Select Add to Home Screen</li><li>Press Add</li></ul>');
	}
}

styles.css

/* bookmark help styles */
.bookmark-info {
	bottom: 5px;
	cursor: pointer;
	display: none;
	left: 5px;
	line-height: 1.428571429;
	margin: 0;
	position: fixed;
	right: 5px;
	z-index: 1050;
}
 
.bookmark-info .glyphicon {
	font-size: 40px;
	margin-left: 6px;
}
 
.bookmark-modal ul,
.bookmark-modal p {
	margin: 0;
}
 
.bookmark-modal img {
	margin-left: 6px;
	width: 16px;
}

template.html

<!-- bookmark help html -->
<div class="bookmark-info alert alert-success">
	<span class="glyphicon glyphicon-plus-sign pull-right"></span>
	<p>Add an icon to your phone's home screen to easily access this website.</p>
</div>
 
<div class="bookmark-modal modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">Add an icon to your phone's home screen</h4>
			</div>
			<div class="modal-body">
				<p>iOS:</p><ul><li>Press the share icon <img src="img/ios-action-icon.png"></li><li>Add to Home Screen</li><li>Press Add</li></ul>
				<p>Android:</p><ul><li>Press the menu button</li><li>Add to homescreen or Add shortcut to home</li><li>Press Add</li></ul>
				<p>Windows Phone:</p><ul><li>Press the menu button (three dots)</li><li>Press pin to start</li></ul>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Ignore</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal">Dismiss</button>
			</div>
		</div>
	</div>
</div>