CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Billy ONeal
Billy ONeal

Reputation: 106530

How do I block the UI using JQuery UI?

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?

Upvotes: 6

Views: 12530

Answers (4)

Sameer Parab
Sameer Parab

Reputation: 3

<div id="__messageBox_wait" class="messageBoxArea" style="display: none; cursor: default">
                <div>
                    <label id="__messageBox_wait_text" style="vertical-align: middle">
                        Please wait</label>
                </div>
</div>

function blockUI() {
        var boxHtml = $('#__messageBox_wait');
        var message = "Please wait...";
        $('#__messageBox_wait_text').text(message);
        $.blockUI({
            theme: false,
            title: 'Message',
            message: boxHtml,
            css: 'width:15%'
        });
    }


    $.unblockUI(); -- call to Unblock UI
     blockUI();  --- call to block UI

Upvotes: 0

alex
alex

Reputation: 490143

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

Upvotes: 6

Adrian P.
Adrian P.

Reputation: 5228

jQuery have only a progress bar as I know. Of course you can do all above but it looks too complicate to manage if you compare with what you are using already.

My recommandation is to try changing jQuery Block UI

Really clean and have many CSS options. Easy to use and implement on any project.

Upvotes: 0

Chetan S
Chetan S

Reputation: 23803

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.

Upvotes: 2

Related Questions