How to build an overlay

An overlay is quick, low cost perk that can easily add a higher level of credibility to your website. If there is any form of expected delay in loading or posting of information, you should give consideration to including an overlay. Fortunately, there are countless plugins available for them, or they are easy to put together. Here is an example.

CLICK HERE FOR A LIVE DEMO


<html>
<head>
 <title>Overlay Demo</title>
 <script type="text/javascript" src="https://playground.one45.com/sfweb/one45_dev.php/js/1edeb09_part_1_jquery-1.6.2.min_1.js"></script>

</head>
<body>

<style>
.hidden
{
 display: none;
}
#overlay
{
    background: #cccccc;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
#overlay_display
{
    position: absolute;
    background: white;
    border: 2px solid black;
    padding: 0px;
    width: 500px;
    height: 100px;
    top: 50px;
}
#overlay_toolbar
{
    background: black;
    height: 25px;
    width: 494px;
    padding: 3px;
}
#overlay_message
{
 float: left;
 color: white;
 width: 420px;
}
#overlay_close
{
 float:right;
 color:white;
 width: 30px;
 height: 25px;
 cursor: pointer;
}

</style>
<script>

var overlay = function()
{
 // this keeps track of the
 // currently exposed div
 // allowing you to have multiple hidden divs
 // inside the overlay
 var visible_div;

 /**
  * Hide the overlay
  * Size it to cover the document
  * Position the content area of the overlay
  */
 function initialize()
 {
  // attach the close funtionality to the close button
  // you can do this by writing onclick directly into
  // the html, but this is cleaner
  $("#overlay_close").click( overlay.close );

  // don't assume the overlay is hidden
  // force hide it
  $('#overlay_container').addClass('hidden')


  // set the position and height of the
  // overlay's content area, based on
  // the size of the browser
  var ctrl = $('#'+'overlay_display');
  var height = $(window).height() - ctrl.height();
  var left = $(window).width()/2  - ctrl.width()/2;
  ctrl.css( 'height',height+'px');
  ctrl.css( "left", left+"px");
 }

 function closeOverlay()
 {
  $('#overlay_container').addClass('hidden');
 }

 /**
  * Clear the contents of the specified div
  */
 function flushDivContents(div_name)
 {
  if (!div_name)
  {
   div_name = visible_div;
  }
  $('#'+div_name).html('')
 }

 /**
  * Display the targeted div,
  * And Add a message to the top
  * message bar
  */
 function showDiv(message, div_name)
 {
  prepareLayer(message, div_name);
  var elem = $('#overlay_container');
  elem.removeClass('hidden');
 }

 /**
  * Reset the styling of the overlay
  * Resize the overlay
  */
 function prepareLayer(message, div_name)
 {
  // stretch the overlay to cover
  // the entire document
  $('#overlay_container').height( $(document).height() );
  $('#overlay').removeClass
  // hide all existing overlay content divs
  $(".overlay_content").each(function(i,el){ $(el).addClass('hidden'); });

  // expose the content div in which you are interested
  var target_div = div_name || 'main_overlay_content';
  var contents = $("#"+target_div);
  contents.removeClass('hidden');
  visible_div = target_div;

  // set the message in the top bar of the overlay content
  var text_el = $('#'+'overlay_message');
  text_el.html( message );
 }

//=====================================================
// THIS IS THE EXPOSED PORTION
//===================================================
 return{
  // initialize the overlay, setting heights, etc
  // run automatically on page load
  init: function(){ initialize(); },

  // hide the overlay
  close: function(){ closeOverlay();  },

  // clear the overlay of content
  flush: function(div_name){ flushDivContents(div_name); },

  // show the overlay content
  show: function(message, div_name){ showDiv( message, div_name);},

  // append the overlay content with more data
  update: function(content, message, div_name){showDiv(message, div_name);$('#'+div_name).html( "<hr>"+message + "<br>" );  },

  // replace the overlay content with new data
  write: function(content,message,div_name){showDiv(message, div_name); $('#'+div_name).html( message + "<br>" );   }
 };
}()

$(document).ready( function(){overlay.init(); });
</script>
<a href='javascript:overlay.show("Here is the message")'>Click here to see the overlay</a>


<div id="overlay_container" class="hidden">
  <div id="overlay"></div>
  <div id="overlay_display">
     <div id="overlay_toolbar">
        <div id="overlay_message"></div>
        <div id="overlay_close">X</div>
     </div>
     <div id="main_overlay_content" class="overlay_content ">
        This is the content in the main overlay div 
     </div>
     <div id="second_overlay_content" class="overlay_content ">   
        This is the content in the second overlay div
     </div>
   </div>
</div>

</body>
</html>

No comments:

Post a Comment