More jQuery (BlockUI plug-in)

March 3rd, 2009 by

“The page at www.yoursite.com says…”

Does that look familiar? If you use alert() or confirm() from JavaScript in your web page, some browsers display a standard, boring window with that title, and your message in it.

A few weeks ago, I introduced jQuery, a powerful tool for writing dynamic and engaging websites quickly. Today I’d like to take a brief moment of your time to introduce BlockUI, a plug-in for jQuery. Beyond the power of jQuery itself, you can accomplish much using jQuery plug-ins. Many common tasks are taken care of and abstracted into easy to use, feature-rich plug-ins – a full list can be found at http://plugins.jquery.com/.

BlockUI (http://malsup.com/jquery/block/) is a small plug-in that will allow you to change a boring prompt into a nice-looking one.

Turn this: http://cmichaelis.whsites.net/whblog/jquery-blockui/boring.html

…into this: http://cmichaelis.whsites.net/whblog/jquery-blockui/better.html

The BlockUI plug-in allows you to place the message over the whole page, or over just a particular block element (like a “div” tag). You can specify a message to display, or you can even have a complex piece of your page hidden (with style=”display: none”) and display it in this fashion.

Visit http://malsup.com/jquery/block/ to download it, and to view more examples – and bring your website’s messages up to the next level.

  • Share this post

E-commerce checklist

Simple and Clean Menus with jQuery

4 Comments

Larry Katz
# 5th March, 2009

That really is a powerful tool. The examples on the download page are indicative of this plugins versatility. It reminds me of slimbox, which is also a jQuery plugin.

jQuery is a lightweight script that can increase productivity so much that it is mind-boggling!

Sajid Wasim
# 20th August, 2009

I am unable to use this plugin. Does it required a ajax enabled website? How do I use it in Asp.net 2.0? I tried to use it in a simple html page but getting as http://cmichaelis.whsites.net/whblog/jquery-blockui/better.html did but getting “jQuery is undefined” error! What I should do?

Sajid Wasim
# 20th August, 2009

Also I download the http://cmichaelis.whsites.net/whblog/jquery-blockui/better.html page with js files jquery.blockUI.1.33.js and jquery.blockUI.js now it says “Invalid Charecter” :(

Chris Michaelis
# 20th August, 2009

Hi Sajid,

If you’re using ASP.Net, then you have some special benefits due to Microsoft shipping JQuery along with Visual Studio (e.g., you can use IntelliSense with JQuery, etc). Here is a link explaining how it all works with ASP.Net:

http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

There is another page that’s not quite as organized but which gives a better “from the ground up” tutorial:

http://www.dotnetcurry.com/ShowArticle.aspx?ID=231&AspxAutoDetectCookieSupport=1

Good luck!
–Chris