jQuery BlockUI vs. jqModal

Question

I need a modal windows that tells the user to wait until I've finished some work on the server. Looks like both BlockUI and jqModal can do this.

Do you have any experiences with any of them? Pros and cons? I'm using ASP.NET MVC.

Figone

Answer 1

I did proof of concept modal dialogs with both jqModal and BlockUI, and I can say without a doubt that BlockUI is the "thinnest" of them. It allows much simpler blocking access to anything that jQuery can select, and you simply pass it a "message" parameter of the modal DIV. It will automatically set display:block and set it on top of the modal overlay.

In addition to standard modal dialogs, I use it to set a "please wait" dialog on on my ajax interfaces if the $.ajax call takes longer than 250ms.

Blakey

For my needs BlockUI looks to be the best fit. – Figone

Answer 2

I've used jqModal quite a bit and really like it. It is very easy-to-implement and flexible, however its primary purpose is the modal dialog.

I have not used BlockUI, although it does seem to provide some different functionality. Rather than just displaying content in modal windows, it can prevent the user from access the whole UI or parts of it.

Another option is the jQuery UI Dialog which is more generic and can be used to build upon. I use this in one application, and although it does not have the out-of-the-box functionality of jqModal, I think it would be very useful if I wanted to build a custom plug-in that integrated with it.

Passepartout

Answer 3

I'm using BlockUI and love it, but word to the wise, It's known to be VERY slow on Firefox in linux. It peaks CPUs to 100%

Ebert

Sounds like a transparency issue – Tracy

Answer 4

I use & like both.

For simple static modals, @Peter J's answer is correct - BlockUI is fantastic and very lightweight. You can pass in an hidden div as the message and it will display it as a modal dialog, which can be made interactive via jQuery binds, etc. It does not provide a method to retrieve the message via ajax without hand-coding it (which is counter to BlockUI's simple perfection- to display a block message while you wait for an ajax operation to complete).

For dynamic modals, jqModal is great as it can retrieve modal content via ajax calls. It can also handle the triggering element for you (button, link, etc), controlling the show/hide itself, though also provides abilities for you to customize it any way you'd like.

To get more complex - I even use both simultaneously to display an ajax-provided dialog via jqModal, then block it via BlockUI upon submit to display a custom message. (One item to note: be aware the default z-index for jqModal is below default for BlockUI so using them together requires you set BlockUI basez option higher than jqModal's default 3000.)

Tortola