simple iphone/android promo overlay

overlay.css

div.modal {
  background:rgba(0, 0, 0, 0.5);
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

.promo {
  background:#fff;
  box-shadow:0 0 20px rgba(0,0,0,0.9);
  margin:5% auto;
  padding:10px;
  width:280px;
  -webkit-border-radius:10px;border-radius:10px;
}

.promo .button {
  background:transparent;
  height:auto;
  padding:0;
}

.promo .button:active {
  color:#fff;
}

.promo a.close,
.promo a.close:active {
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALlJREFUeNqEkDEOwjAMRZ0Ilkgs0At0r7r0OlUOh7hMpY4sTJwAFiQWhvItXBQsx1h6VRT7VfEP1NCWiHbgAV7k13c24jOAG7iA5EhJZnh2iEWjBeeKnKTXrhcsTuDkyFri2SlgR64AjmCU5hV0ctZSBssq1mSypM9w87OLlsmSLJFrL8mVdQD38iIa6c1GqrNOO/5Jr5r2xpFy8dOxkDntJ+9YkxYn7Y6f2jsSyTmrZ/fRi9yR6S3AALDfM4QGhJmyAAAAAElFTkSuQmCC) 50% 50% no-repeat;
  border:none;
  height:40px;
  margin:-12px -12px 0 0;
  text-indent:-9999px;
  width:40px;
}

.promo h1 {
  color:#1f1f1f;
  font-size:18px;
  margin: 0 0 0.7em;
}

.promo img {
  margin:0 65px;
}

.promo .button.hide {
  border:1px solid #c5c5c5;
  color:#48736b;
  float:none;
  font-size:16px;
  margin: 0 0 0.7em;
  padding:10px 16px;
  -webkit-border-radius:10px;border-radius:10px;
}

.promo .hide {
  display:block;
  text-align:center;
}

@media only screen and (orientation: landscape) {
  .promo {
    height:240px;
    margin:-100px 0 0 -210px;
    top:50%;
    left:50%;
    position:absolute;
    width:400px;
  }

  .promo img {
    float:left;
    margin:0 20px 0 0;
  }

  .promo .button.hide {
    font-size:13px;
    margin-left:170px;
  }
}

overlay.js

/**
 *  Promo overlay
 */
$(document).ready(function(){

  // No promo overlay settings in storage. Must be new
  var overlay = 1;

  if (hasLocalStorage() && typeof(localStorage['overlay']) !== 'undefined') {
    var ts = new Date().getTime();
    overlay = parseInt(localStorage['overlay']);

    // Hide overlay for 30 days
    if (overlay + 1000*60*60*24*30 > ts) {
      overlay = 0;
    }
  }

  if (!overlay || (!navigator.userAgent.match(/iPhone/i) && !navigator.userAgent.match(/Android/i))) {
    return;
  }


  // Inject overlay stylesheet
  (function(d, t) {
    var o = d.createElement(t),
        s = d.getElementsByTagName(t)[0] || document.documentElement;

    o.href = 'overlay.css';
    o.type = 'text/css';
    o.rel  = 'stylesheet';

    s.parentNode.insertBefore(o, s);
  }(document, 'link'));


  var ua = navigator.userAgent.match(/Android/i) ? 'android' : 'iphone';
  var data = {
    "iphone": {
      "title": "TITLE for iPhone",
      "link": "http://itunes.apple.com/app/ID",
      "text": "Our all-new iPhone app...",
      "image": "apps-iphone.jpg"
    },
    "android": {
      "title": "TITLE for Android",
      "link": "https://play.google.com/store/apps/details?id=ID",
      "text": "Our all-new Android app...",
      "image" : "apps-android.png"
    }
  };

  var overlay = '<div class="modal"><div class="promo"><a class="button close">X</a><h1>' + data[ua].title+ '</h1>\
  <img src="' + data[ua].image+ '" width=150 />\
  <p>' + data[ua].text + '</p>\
  <a class="button hide" href="' + data[ua].link + '">Try the app for free!</a>\
  <a class="hide">No thanks, continue to site.com</a>\
</div></div>';
  $("body").append(overlay);

  $("div.modal .close").click(function(){
    $(this).parent().parent().css('display', 'none');
    localStorage['overlay'] = new Date().getTime();
    return false;
  });

  $('div.modal .hide').click(function(){
    $(this).parent().parent().css('display', 'none');
    localStorage['overlay'] = 0;
  });
});

function hasLocalStorage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  }
  catch (e) {
    return false;
  }
}