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.
You should bundle it into a module and post it to GitHub :)
Huh. Interesting! ++ to you good sir.
@Luke if YUI 3 starts to have more of a story around custom skinning I will ;-)
Wrote my thoughts on YUI 3 Widget skinning on the YUI Library Forum.
Cool!
But it would’ve been nice with an example where the borders worked in at least IE7 or IE8 as well. (I know CSS3 isn’t supported, but still).
Thanks!
/J
@Joacim Feel free to create a 1×1 alpha-transparent PNG that’s black @ 50% opacity; then you could do this in CSS:
Since IE doesn’t know about
rgbait will ignore it, letting the background image shine through.Brilliant, thanks for this. Was literally about to try this myself this week!
Works in YUI 2.x panels as well if you remove the “yui-widget-” from the CSS and set underlay to “none”
@Richard Glad this helps you. Good find on working with YUI 3.x Panel; makes sense since the Standard Module structure (hd, bd, ft) is the same.
@Eric – Great! Thanks!
/J