925 HTML

While wandering-around the Internet looking for examples of overlays in web application interfaces I thought of a challenge: create a working Facebook–styled overlay. I’m in the process of creating an application-wide design for overlays and needed some inspiration. Facebook uses overlays extensively and they have a distinct style [that others imitate, maybe even me :-) ]; I set-out to re-create this style.

Not wanting to mess around — I whipped up a working example of Facebook-styled overlays using only YUI 3 and CSS 3; things are nice and easy to do when you use the latest technologies.

The code is short enough I’ll just lay it all down here:

The JavaScript — YUI 3 is doing all the heavy lifting

YUI().use('overlay', 'dd-constrain', function(Y){

	var fbOverlay = new Y.Overlay({

		contentBox : '#fbOverlay',
		width : '540px',
		height : '300px',
		visible : false

	}).render();

	// make overlay draggable
	new Y.DD.Drag({

		node : fbOverlay.get('boundingBox'),
		handles : ['.yui-widget-hd']

	}).plug(Y.Plugin.DDConstrained, { constrain2view : true });

	// show overlay
	Y.get('#show-fbOverlay').on('click', function(e){
		if ( ! fbOverlay.get('visible') ) {
			fbOverlay.align(this, [Y.WidgetPositionExt.TL, Y.WidgetPositionExt.TR]);
			fbOverlay.show();
		}
	});

	// hide overlay
	Y.get('#hide-fbOverlay').on('click', function(e){
		fbOverlay.hide();
	});

});

Oh, and if you didn’t notice these Facebook–styled overlays are drag-able; Facebook doesn’t do that…

The CSS [3] — This is all me… and Facebook’s colors

#fbOverlay { display: none; }

.yui-widget #fbOverlay {
	display: block;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	padding: 10px;
}
#fbOverlay .yui-widget-hd {
	border: #3B5998 1px solid;
	background: #6D84B4;
	color: #fff;
	padding: 0 10px;
	cursor: move;
}
#fbOverlay .yui-widget-bd {
	background: #fff;
	border: #555 1px solid;
	border-top: none;
	border-bottom : none;
	padding: 0 10px;
}
#fbOverlay .yui-widget-ft {
	border: #555 1px solid;
	border-top: none;
	background: #f2f2f2;
}
#fbOverlay .yui-widget-ft > div {
	border-top: #ccc 1px solid;
	padding: 5px 10px;
	text-align: right;
}

If you View Source you’ll see the contents of the overlay are in the (X)HTML; I’m making sure the hide these overlay–contents until the YUI Overlay Class instance grabs them up.

Not much to it; the only CSS 3 stuff is in the second rule, background: rgba(0, 0, 0, 0.5); giving the background some transparency and border-radius: 6px; to round-them-corners. Funny thing, these two style declarations save so much time and effort; look the source for Facebook’s overlay and you’ll see a nasty-mess of tables.

If you missed the link to the working version of the code above: here it is again.