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