Sunday, October 21, 2007

Leveraging CSS opacity for help

{

A few projects ago a control was created (who exactly did it I'm not sure) for displaying dialog "popups" without new browser windows.  The technique was fairly straightforward: an IFRAME with an opacity filter and a div with the popup values. 

I wasn't a huge fan of the infamous "popup" which managed to come up in project after project, but the idea of using opacity on an IFRAME for an overlay of helpful information struck me about a week ago. 

The nRegex interface, which is quite straightforward to me, still seems to pose some confusion to new users and so I thought I'd use it might be suitable for a virgin implementation of the idea.  It's a little crude* but the idea should come across: use the 'How to use Nregex' button to display the overlay and it seeks to explain the various pieces of the interface.

The implementation is quite simple. There's an IFRAME with the following attributes:

frameBorder="0"
scrolling="no"
style="z-index:1000;position:absolute;
top:0;left:0;width:2000px;height:2000px;
FILTER:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
display:none;"
src="infoFrame.htm"

Within the frame, a button hides the IFRAME calling a javascript function from the parent window. 

The easiest way to implement this is to use the skeleton of the interface in the *original* design.  I'm interested in comments on this approach - would it be feasible as a way to document an interface's functionality?

}

No comments: