DIV Popup with "Lightbox" Style

<html>
	<head>
		<title>DIV Popup with "Lightbox" Style</title>
		<script src="https://code.jquery.com/jquery-1.6.2.min.js"></script>
		<style>
			/* popup div contents */
			DIV.lightbox-content {
			    position: absolute;
			    margin-right: auto;
			    margin-left: 5%;
			    width: 90%;
			    top:75px;
			    z-index: 10002;
			
			    background-color: white;
			    border:1px solid;  
			    border-color: #ccc;
			    padding: 5px;
			    box-shadow: 0px 0px 10px #000000;
			    -moz-box-shadow: 0px 0px 10px #000000;
			    -webkit-box-shadow: 0px 0px 10px #000000;
			    -webkit-border-radius: 3px;
			    -moz-border-radius: 3px;
			
			    text-align:left;
			    overflow-y: auto;
			    overflow-x: hidden;
			    padding: 10px 0 26px;
			    
			    -webkit-transition: opacity 0.4s linear;
			}
			
			
			/* the overlay that whites out the background while the lightbox is displayed */
			.lightbox-white-overlay{
			    background-color: #000000;
			    height: 100%;
			    left: 0%;;
			    position: fixed;
			    top: 0%;
			    width: 100%;
			    z-index: 10001;
			    
			    -webkit-transition: opacity 0.4s linear;
			}
			
		</style>
	</head>
	<body>
	<h2>DIV Popup with "Lightbox" Style</h2>
	
	<p>
	<a href="javascript://" onclick="new Lightbox('aKey', '<br><br><br><br><br><br><br><br>Box Contents Go Here<br><br><br><br><br><br><br><br>')">Open Lightbox</a>
	</p>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
	
	<script>
	
	function Lightbox(id, content) {
		
		var self = this;
		var box;
		var boxContent;
		var whiteOverlay;
		
		function init(){
			// we want to display the details in a div layer floating above the main content
			box = $("#lightbox");
			boxContent = $("#lightbox .lightbox-content");
			whiteOverlay = $("#lightbox .lightbox-white-overlay");
			
			if(box.length == 0) {
				// we don't have a lightbox div yet so create one at the bottom of the page
				box = $('<div id="lightbox" class="lightbox"/>')
				$('body').append(box);
				
				boxContent = $('<div class="lightbox-content"></div>');
				box.append(boxContent);
				
		        whiteOverlay = $('<div class="lightbox-white-overlay"></div>');
		        box.append(whiteOverlay);   
			}
	
			// register the ESC key handler
	        $(document).bind('keydown', escKeyHandler);
	        
			// populate with dummy content for now
	        boxContent.html(content);
			
	        // make it visible (not visually, that's done with opacity, but structurally)
	        // we set display:none in the close method so that it doesn't intercept clicks
	        whiteOverlay.css('display', 'block');
	        boxContent.css('display', 'block');
	        // transition the opacity
	        whiteOverlay.css("opacity", 0.4);
	        boxContent.css("opacity", "1.0");
	        
			// size the box
			resizeToContents();
		};
		
	    /* 
	     * Listen for esc key and close the box
	     */
		function escKeyHandler(e) {
	            if(e && e.keyCode == 27){
	                // if the key pressed is the escape key, close the box
	                close();
	            }
	    }
		
		function resizeToContents() {
		    /* set the max height to viewport height minus space for header and footer of box */
		    var contentHeight = boxContent.height();
		    var viewportHeight = getViewportHeight();
	
		    /*  we want to keep space both top and bottom, so the maxHeight must be viewport-250px or smaller */
		    var possibleHeight = viewportHeight - 150;
	
		    console.log("contentHeight: " + contentHeight + "   possibleHeight: " + possibleHeight + "  viewport height: " + viewportHeight);
	
		    // set the maxHeight to the possibleHeight
		    boxContent.css('maxHeight', possibleHeight + "px");
	
		    var scrollOffset = $(document.viewport).scrollTop();
	
		    // we are doing absolute positioning instead of fixed, so we need to calculate where we are on the page to show it
		    boxContent.css('top', (scrollOffset + 60) + 'px');
	
		    // prevent scrolling
		    preventScrolling(scrollOffset);
		}
	
	
		
		/* used by firefox preventScrolling implementation so that we can stopObserving this */
		var scrollListener = 'placeholder';
		
		function preventScrolling(offset) {
		    if (pageHasScrollBar()) {
		        if (BrowserDetect.browser == "Firefox") {
		        	//NOTE: this isn't working properly on Firefox right now. I had it working at some point in the past but it's not right now.
		        	// I don't have time to figure it out now so am leaving the code as is with this note
		            var offsetToStayAt = $(document.viewport).scrollTop();
		            scrollListener = function(event) {
		            console.log("scroll here");
		                window.scrollTo(0, offsetToStayAt);
		            }
		            $('document').bind('scroll', scrollListener);
		        } else {
		            /*  compensate for hiding the scrollbar so that we don't 'bounce' the page back and forth */
		            var scrollerWidth = getScrollerWidth();
		            if (scrollerWidth == 0) {
		                scrollerWidth = 17;
		                // default on IE
		            }
		            // generally this should be 15 on Safari and Firefox
		            document.documentElement.style.paddingRight = scrollerWidth + "px";
		            document.documentElement.style.overflow = "hidden";
		        }
		    }
		}

if (BrowserDetect.engine == "WebKit") {
					whiteOverlay.unbind('webkitTransitionEnd');			
				} else {
					whiteOverlay.unbind('transitionend');
				}
			}
	
			if (BrowserDetect.engine == "WebKit") {
				whiteOverlay.bind('webkitTransitionEnd', transitionEndFunction);			
			} else {
				whiteOverlay.bind('transitionend', transitionEndFunction);
			}
			
			if (BrowserDetect.engine == "Gecko") {
				// the transitionend event is not happening so this is here to make Firefox work without animation
				whiteOverlay.css('display', 'none');
				boxContent.css('display', 'none');
			}

boxContent.css("opacity", "0");
			whiteOverlay.css("opacity", "0");	        
		}
	
		/* whether the browser page has a scrollbar present */
		function pageHasScrollBar() {
		   if (getDocumentHeight() > getViewportHeight()) {
		    return true; 
		   } else { 
		    return false;
		   } 
		} 
	
		function scrollPosition() {
		    if(!pageHasScrollBar()) {
		        return 0;
		    }
		    var scrollTop = document.body.scrollTop;
	
		    if (scrollTop == 0) {
		        if (window.pageYOffset)
		            scrollTop = window.pageYOffset;
		        else
		            scrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
		    }
		    return scrollTop;
		}
	
		//Get the height of the entire document
		function getDocumentHeight() {
		    if (document.documentElement && (!document.compatMode || document.compatMode=="CSS1Compat")) {
		        var topMargin = parseInt($(document.body).css('marginTop'),10) || 0;
		        var bottomMargin = parseInt($(document.body).css('marginBottom'), 10) || 0;
		      return Math.max(document.body.offsetHeight + topMargin + bottomMargin, document.documentElement.clientHeight, document.documentElement.scrollHeight, 0);
		    }
		    return Math.max(document.body.scrollHeight, document.body.clientHeight, 0);
		 };
		 
		 //Get the height of the viewport
		 function getViewportHeight() {
		    if (!window.opera && document.documentElement && (!document.compatMode || document.compatMode=="CSS1Compat")) {
		      return document.documentElement.clientHeight;
		    }
		    else if (document.compatMode && !window.opera && document.body) {
		      return document.body.clientHeight;
		    }
		    return 0;
		};
	
		// Get the width of the viewport
		function getViewportWidth() {
		    if (document.documentElement && (!document.compatMode || document.compatMode=="CSS1Compat")) {
		      return document.documentElement.clientWidth;
		    }
		    else if (document.compatMode && document.body) {
		      return document.body.clientWidth;
		    }
		    return 0;
		  };
		  
		function getScrollerWidth() {
		    var scr = null;
		    var inn = null;
		    var wNoScroll = 0;
		    var wScroll = 0;
	
		    // Outer scrolling div
		    scr = document.createElement('div');
		    scr.style.position = 'absolute';
		    scr.style.top = '-1000px';
		    scr.style.left = '-1000px';
		    scr.style.width = '100px';
		    scr.style.height = '50px';
		    // Start with no scrollbar
		    scr.style.overflow = 'hidden';
	
		    // Inner content div
		    inn = document.createElement('div');
		    inn.style.width = '100%';
		    inn.style.height = '200px';
	
		    // Put the inner div in the scrolling div
		    scr.appendChild(inn);
		    // Append the scrolling div to the doc
		    document.body.appendChild(scr);
	
		    // Width of the inner div sans scrollbar
		    wNoScroll = inn.offsetWidth;
		    // Add the scrollbar
		    scr.style.overflow = 'auto';
		    // Width of the inner div width scrollbar
		    wScroll = inn.offsetWidth;
	
		    // Remove the scrolling div from the doc
		    document.body.removeChild(
		        document.body.lastChild);
	
		    // Pixel width of the scroller
		    return (wNoScroll - wScroll);
		}
	
		// call init on instantiation
		init();
	}
	
	
	
	/*  ********************************************************************************   */
	/* BROWSER DETECT */
	/*  ********************************************************************************   */
	var BrowserDetect = {
	  init: function () {
	    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
	    this.engine = this.searchString(this.dataEngine) || "An unknown engine";
	    this.version = this.searchVersion(navigator.userAgent)
	      || this.searchVersion(navigator.appVersion)
	      || "an unknown version";
	    this.OS = this.searchString(this.dataOS) || "an unknown OS";
	  },
	  searchString: function (data) {
	    for (var i=0;i<data.length;i++)  {
	      var dataString = data[i].string;
	      var dataProp = data[i].prop;
	      this.versionSearchString = data[i].versionSearch || data[i].identity;
	      if (dataString) {
	        if (dataString.indexOf(data[i].subString) != -1)
	          return data[i].identity;
	      }
	      else if (dataProp)
	        return data[i].identity;
	    }
	  },
	  searchVersion: function (dataString) {
	    var index = dataString.indexOf(this.versionSearchString);
	    if (index == -1) return;
	    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	  },
	  dataBrowser: [
	    {
	      string: navigator.userAgent,
	      subString: "Chrome",
	      identity: "Chrome"
	    },
	    {   string: navigator.userAgent,
	      subString: "OmniWeb",
	      versionSearch: "OmniWeb/",
	      identity: "OmniWeb"
	    },
	    {
	      string: navigator.vendor,
	      subString: "Apple",
	      identity: "Safari",
	      versionSearch: "Version"
	    },
	    {
	      prop: window.opera,
	      identity: "Opera"
	    },
	    {
	      string: navigator.vendor,
	      subString: "iCab",
	      identity: "iCab"
	    },
	    {
	      string: navigator.vendor,
	      subString: "KDE",
	      identity: "Konqueror"
	    },
	    {
	      string: navigator.userAgent,
	      subString: "Firefox",
	      identity: "Firefox"
	    },
	    {
	      string: navigator.vendor,
	      subString: "Camino",
	      identity: "Camino"
	    },
	    {    // for newer Netscapes (6+)
	      string: navigator.userAgent,
	      subString: "Netscape",
	      identity: "Netscape"
	    },
	    {
	      string: navigator.userAgent,
	      subString: "MSIE",
	      identity: "Explorer",
	      versionSearch: "MSIE"
	    },
	    {
	      string: navigator.userAgent,
	      subString: "Gecko",
	      identity: "Mozilla",
	      versionSearch: "rv"
	    },
	    {     // for older Netscapes (4-)
	      string: navigator.userAgent,
	      subString: "Mozilla",
	      identity: "Netscape",
	      versionSearch: "Mozilla"
	    }
	  ],
	  dataOS : [
	    {
	      string: navigator.platform,
	      subString: "Win",
	      identity: "Windows"
	    },
	    {
	      string: navigator.platform,
	      subString: "Mac",
	      identity: "Mac"
	    },
	    {
	         string: navigator.userAgent,
	         subString: "iPhone",
	         identity: "iPhone/iPod"
	      },
	    {
	      string: navigator.platform,
	      subString: "Linux",
	      identity: "Linux"
	    }
	  ],
	  dataEngine : [
	    {
	      string: navigator.userAgent,
	      subString: "WebKit",
	      identity: "WebKit"
	    },
	    {
	      string: navigator.userAgent,
	      subString: "Gecko/",
	      identity: "Gecko"
	    }
	  ]
	
	};
	BrowserDetect.init();
	/*  ********************************************************************************   */
	/* END BROWSER DETECT */
	/*  ********************************************************************************   */

</script>

</body>
</html>

Modified http://code.jquery.com/jquery-1.6.2.min.js to a secure url

https://code.jquery.com/jquery-1.6.2.min.js