[Nearly one month later...]

I've just finished writing up a small Javascript object for locking the user interface (say, if you want to lock the browser while you prompt the user with a nice little dhtml window, or something ), so I said to myself: "Why don't I share it with my faithful and forgiving public?".

At the time, the object relies on the jQuery library and it's dimensions plugin to work. Now, I hate dependencies just as much as the next guy, but that was the easiest/quickest way to get it working. Since jQuery and dimensions are a part of nearly all of my projects anyways, I don't really mind. However, if I see enough interest I might rewrite it to work independently.

The object itself is extremely easy to use. All you need to do is create an instance of the lockInterface object, and call it's lock method to freeze the screen.

view plain print about
1<script type="text/javascript">
2var lock_obj=new lockInterface().lock()

Depending on your page styles, you might notice scrollbars appearing. If this is the case, it means you have either margins or padding on your body element. Personally, I'd recommend setting those values to zero (via css), since the object changes your html and body elements height and width to 100%. Add that to the margin and/or padding and you've got more than 100%, hence the scrollbars.

At the time, the lockInterface object can be customized through three settings: clickable, overlayColor and overlayOpacity.

lockInterface ({

clickable ( true | false ( default: true ) ),

overlayColor ( string ( default: '#FFF' ) ),

overlayOpacity ( float 0-1 ( default: 0.5 ) )


The clickable setting tells whether the interface is unlocked when the user clicks on the overlay. If set to false, you must manually unlock the interface using the unlock method.

The source is attached for your downloading pleasure. If you have any questions you can drop me a line here.

You've got red on you.