jameshibbard/ui-blocking-overlay.html

## ui-blocking-overlay.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      #overlay{
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        -moz-opacity: 0.8;
        filter: alpha(opacity=80);
        opacity:.80;
        z-index:1001;
      }

      #announcement{
        display: none;
        position: absolute;
        width: 250px;
        height: 120px;
        padding: 0 16px;
        border: 16px solid orange;
        background-color: white;
        z-index:1002;
      }

      #close{
        display: inline;
        float: right;
      }
    </style>
  </head>
  <body>
    <h1>Some content</h1>
    <button>Clear storage</button>

    <div id="announcement">
      <p>This is an important announcement.</p>
      <p>Seriously!</p>
      <a id="close" href="#">Close</a>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      jQuery.fn.center = function () {
        var w = $(window);
        this.css("position","absolute");
        this.css("top", Math.max(0, ((w.height() - $(this).outerHeight()) / 2)
          + w.scrollTop()) + "px");
        this.css("left", Math.max(0, ((w.width() - $(this).outerWidth()) / 2)
          + w.scrollLeft()) + "px");
        return this;
      }

      var hasReadAnnouncement = localStorage.getItem("hasReadAnnouncement");
      if (!hasReadAnnouncement){
        $('<div>', {id : 'overlay'}).appendTo('body');
        $("#announcement").fadeIn('slow').center();
      }

      $("#close").click(function(e){
        localStorage.setItem("hasReadAnnouncement", "true");
        $("#announcement").remove();
        $("#overlay").remove();
        e.preventDefault();
      });

      $("button").on("click", function(){
        localStorage.removeItem("hasReadAnnouncement");
        alert("Storage cleared");
      })
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<style>
	#overlay{
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	-moz-opacity: 0.8;
	filter: alpha(opacity=80);
	opacity:.80;
	z-index:1001;
	}

	#announcement{
	display: none;
	position: absolute;
	width: 250px;
	height: 120px;
	padding: 0 16px;
	border: 16px solid orange;
	background-color: white;
	z-index:1002;
	}

	#close{
	display: inline;
	float: right;
	}
	</style>
	</head>
	<body>
	<h1>Some content</h1>
	<button>Clear storage</button>

	<div id="announcement">
	<p>This is an important announcement.</p>
	<p>Seriously!</p>
	<a id="close" href="#">Close</a>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>
	jQuery.fn.center = function () {
	var w = $(window);
	this.css("position","absolute");
	this.css("top", Math.max(0, ((w.height() - $(this).outerHeight()) / 2)
	+ w.scrollTop()) + "px");
	this.css("left", Math.max(0, ((w.width() - $(this).outerWidth()) / 2)
	+ w.scrollLeft()) + "px");
	return this;
	}

	var hasReadAnnouncement = localStorage.getItem("hasReadAnnouncement");
	if (!hasReadAnnouncement){
	$('<div>', {id : 'overlay'}).appendTo('body');
	$("#announcement").fadeIn('slow').center();
	}

	$("#close").click(function(e){
	localStorage.setItem("hasReadAnnouncement", "true");
	$("#announcement").remove();
	$("#overlay").remove();
	e.preventDefault();
	});

	$("button").on("click", function(){
	localStorage.removeItem("hasReadAnnouncement");
	alert("Storage cleared");
	})
	</script>
	</body>
	</html>