How to block user interface using jQuery UI?

Question

I used this plugin to lock the interface: http://jquery.malsup.com/block/

The plugin works fine, I just would be extremely surprised if the jQuery user interface didn’t do this already, given that it should do the same for it. Dialog function.

How to block user interface using jQuery UI?

Answer 1

You can do something hacked - call modal, then in the callback onopen, remove()modal itself.

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

Hey! I said it was hacked :)

or

, . , , .

HTML- show() hide() .

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

( , )

div () 100% height/width z-index opacity (, IE6 ),

position: fixed, , . , , $('body').css({ 'overflow-y': 'hidden' }).

Answer 2

"" , div z , .

Answer 3

jQuery only has a progress bar, as I know. Of course, you can do all of the above, but it looks too complicated to handle if you compare with what you are already using.

My recommendation is to try changing jQuery Block UI

Really clean and has lots of CSS options. Easy to use and implement in any project.

Answer 4

<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