browser update modal

browserUpdate.html

<div id="browserUpdate" class="browserUpdate overlay">
  <a href="#" class="overlay-close js-close"><i class="icn-x icon-box -rev"></i></a>
  <div class="view view-directory swiper-container browserUpdate-container">
    <div class="swiper-slide">
      <div class="row cf">
        <div class="col-18 ac ci browserUpdate-info">
          <img class="browserUpdate-warning-icon" src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/warning.png" alt="warning icon">
          <h4>Did you know your browser is out of date?</h4>
          <p>To get the best possible experience using our website we recommend that you upgrade to a newer version or other web broswer. A list of the most popular web browsers can be found below. </p>
          <p><strong>By closing this window you acknowledge that your experience on this website may be degraded.</strong></p>
        </div>
      </div>
      <div class="row cf">
        <div class="col-23 ci">
          <table class="ac">
            <tr>
              <td> <img class="browserUpdate-logo" src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/chrome.png" alt="chrome logo"><h5>Google<br/>Chrome</h5> <div class="browserUpdate-platforms"><small>Available for</small><img src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/platform-win.png"><img src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/platform-apple.png"></div><a class="btn browserUpdate-btn" target="_blank" href="http://www.google.com/chrome/">Download →</a></td>
              <td> <img class="browserUpdate-logo" src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/firefox.png" alt="chrome logo"><h5>Firefox</h5> <div class="browserUpdate-platforms"><small>Available for</small><img src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/platform-win.png"><img src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/platform-apple.png"></div><a class="btn browserUpdate-btn" target="_blank" href="https://www.mozilla.org/en-US/firefox/new/">Download →</a></td>
              <td> <img class="browserUpdate-logo" src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/ie.png" alt="chrome logo"><h5>Internet<br/>Explorer</h5> <div class="browserUpdate-platforms"><small>Available for</small><img src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/platform-win.png"></div><a class="btn browserUpdate-btn" target="_blank" href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Download →</a></td>
              <td> <img class="browserUpdate-logo" src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/safari.png" alt="chrome logo"><h5>Apple<br/>Safari</h5> <div class="browserUpdate-platforms"><small>Available for</small><img src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/platform-apple.png"></div><a class="btn browserUpdate-btn" target="_blank" href="http://support.apple.com/downloads/#safari">Download →</a></td>
              <td> <img class="browserUpdate-logo" src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/opera.png" alt="chrome logo"><h5>Opera</h5> <div class="browserUpdate-platforms"><small>Available for</small><img src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/platform-win.png"><img src="/sites/all/themes/adu/assets/media/img/optimized/browserUpdate/platform-apple.png"></div><a class="btn browserUpdate-btn" target="_blank" href="http://www.opera.com/download">Download →</a></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

browserUpdate.js

/********************
 * 
 * Set the allowed list of browsers, ex. chrome v25 and up
 * This checks the user agent and will then append an external html file to the body.
 * If the user closes the modal (css not included) then a cookie is set to not display
 * this message again for 7 days.
 * 
********************/
// requires jQuery
// requires Modernizr
// requires Detectizr

var browserUpdate = {
	allowedList: {
		"chrome": 25,
		"firefox": 18,
		"ie": 10,
		"opera": 12,
		"safari": 6
	},
	browser: function(){
		var  name = Detectizr.browser.name,
			version = Detectizr.browser.major;
		return name + version;
	},
	close: function(){
		$j(document).on("click",".browserUpdate .js-close", function(e){
			e.preventDefault();
			$j('#browserUpdate').remove();
			browserUpdate.eraseCookie("aduBrowserUpdateWarning");
			browserUpdate.createCookie("aduBrowserUpdateWarning",true,7);
		});
	},
	check: function(){
		if(browserUpdate.allowedList[Detectizr.browser.name] > Detectizr.browser.major && !browserUpdate.readCookie("aduBrowserUpdateWarning") === true){
			console.log('allowList >=  browser major',browserUpdate.allowedList[Detectizr.browser.name]);
			$j.ajax({
				url: "/sites/all/themes/adu/templates/parts/browserUpdate.html",
				dataType: 'html'
			})
			.done(function(data) {
				console.log('ajaxing browserUpdate');
				document.body.innerHTML += data;
			})
			.fail(function() {
				console.log("error ajaxing browserUpdate");
			});
		}
	},
	createCookie: function(name, value, days) {
		var expires;
		if (days) {
			var date = new Date();
			date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
			expires = "; expires=" + date.toGMTString();
		} else {
			expires = "";
		}
		document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
	},
	readCookie: function(name) {
		var nameEQ = escape(name) + "=";
		var ca = document.cookie.split(';');
		for (var i = 0; i < ca.length; i++) {
			var c = ca[i];
			while (c.charAt(0) === ' ') c = c.substring(1, c.length);
			if (c.indexOf(nameEQ) === 0) return unescape(c.substring(nameEQ.length, c.length));
		}
		return null;
	},
	eraseCookie: function(name) {
		browserUpdate.createCookie(name, "", -1);
	},
	init: function(){
		browserUpdate.check();
		browserUpdate.close();
	}
}


$j(document).ready(function(){
  browserUpdate.init();
});