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?

Accepted Answer

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. ```

``` 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. You can also hide the scrollbars if you want by doing `$('body').css({ 'overflow-y': 'hidden' })`.

How do I block the UI using JQuery UI?

Solution

Problem