How do I block the UI using JQuery UI?

Question

I've been using this plugin to block the UI: http://jquery.malsup.com/block/

The plugin works excellently, it's just that I'd be enormously surprised if jQuery UI didn't do such a thing already, given that it must do effectively the same thing for it's Dialog feature.

How does one block the UI using JQuery UI?

Answer 1

You could do something hacky - call the modal, then on the onopen callback, remove() the modal itself.

$("#something").dialog({
   open: function(event, ui) { $('.ui-dialog').remove(); }
});

Hey! I said it was hacky :)

or

Examine the Modal code and see if it calls a function to block the UI. Perhaps you could add an external reference to it so you can call it yourself.

or

Add this HTML to you document, and call show() or hide() on it.

<div class="ui-widget-overlay" style="width: 100%; height: 100%; z-index: 32767;"></div>

or (if you are unsure how they are made)

They are simply a div (commonly) absolutely positioned and 100% height/width, with a high z-index and usually an opacity (check out how to do it in IE6 with filters).

You can also set it to position: fixed so it will always be there if you scroll. This causes problems on iDevices I think. You can also hide the scrollbars if you want by doing $('body').css({ 'overflow-y': 'hidden' }).

Answer 2

To "block" the UI, you just insert an absolutely positioned div with a high z-index and desired background color and opacity such that it covers the whole page.