litr.es

Overlay an element on a div to disable it (a.k.a. lightbox on a div minus the images)

Today I came up with an idea to disable access to a certain part of a webpage when something is clicked. I immediately thought of lightbox, but that is complicated and I couldn’t find anyway to constrain it to a div.

I then stumbled across phatfusion’s lightbox which was designed for MooTools 1.11

It did exactly what I wanted in terms of being constrained to the div, so I just had to take out all the stuff for showing the image and convert it to work with MooTools 1.2.1

So here’s what ended up working for me (this would be lightbox.js):

var Lightbox = {

	init: function(container, opacity){
		this.container = container;
		this.opacity = opacity;

		this.anchors = [];
		$each(document.links, function(el){
			if (el.rel && el.rel.test(/^lightbox/i)){
				el.onclick = this.click.pass(el, this);
				this.anchors.push(el);
			}
		}, this);
		this.eventPosition = this.position.bind(this);

		this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(this.container);
	},

	click: function(link){
		this.position();
		new Fx.Tween(this.overlay, {
			property: 'opacity',
			duration: 500, 
			transition: Fx.Transitions.Quart.easeInOut
		}).start(0,this.opacity);
		return false;
	},

	position: function(){ 

		if(this.container == document.body){ 
			var h = window.getScrollHeight()+'px'; 
			var w = window.getScrollWidth()+'px';
			this.overlay.setStyles({top: '0px', height: h, width: w}); 
		}else{
			var myCoords = $(this.container).getCoordinates();
			this.overlay.setStyles({
				top: myCoords.top+'px', 
				height: myCoords.height+'px', 
				left: myCoords.left+'px', 
				width: myCoords.width+'px'
			}); 
		} 
	},

};

Then in the html, you would have something like this:

<html>
<head>
	<title>test</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
	<script type="text/javascript" src="lightbox.js"></script>
	<style type="text/css" media="screen">
		#lbOverlay {
			position: absolute;
			left: 0;
			width: 100%;
			background-color: #000;
		}
		#content {
			height: 300px;
			width: 800px;
		}
	</style>
</head>
<body>

<div>
	<a href="some-url.html" rel="lightbox">show lightbox</a>
</div>

<div id="content">
	This is a test.  It is only a test.
</div>

</body>
<script type="text/javascript">
	window.addEvent('domready',function(){
		Lightbox.init('content', '0.8');
	});
</script>
</html>

Published

26 March 2009

Tags